原生实现点击li变颜色
生活随笔
收集整理的這篇文章主要介紹了
原生实现点击li变颜色
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
實現(xiàn)簡單的點(diǎn)擊li變顏色
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><style>*{margin:0; padding:0;}li{list-style: none;}ul{width: 202px;margin: 0 auto;background: #1A9096;}li{width:200px;height:50px;text-align: center;line-height: 50px;margin-bottom: 10px;color: #fff;box-shadow:0px 6px 10px #0F545B inset;background: linear-gradient(to left, #1A9096 , #0D5A67);}.selected{background: linear-gradient(to left, #027DB4 , #0A4D64);}</style> </head> <body><ul><li><span>我愛你</span></li><li><span>我愛你</span></li><li><span>我愛你</span></li><li><span>我愛你</span></li></ul><script>d=document.getElementsByTagName('li')console.log(d)for(var i=0;i<d.length;i++){d[i].index=i;d[i].onclick=function(){for(var j=0;j<d.length;j++){d[j].className='';//取消菜單樣式}d[this.index].className='selected';}}</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的原生实现点击li变颜色的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信支付元转分的正确姿势
- 下一篇： 黑马SpringBoot --基础篇