javascript 简单的导航栏点击变色

对方正在寻找表情包... 2021-05-13 05:25:58

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
tab{
width: 600px;
height: 30px;

}
ul{
width: 540px;
height: 40px;
border: 1px solid red;

}
li{
float: left;
width: 80px;
height: 40px;
margin: 0 20px;
cursor: pointer;
list-style: none;
line-height: 40px;
text-align: center;
}
.current{
background-color: black;
color: white;
}
</style>
</head>
<body>
<div id="" class="tab">
<ul>
<li class="current">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</div>
<script type="text/javascript">

var lis = document.querySelectorAll('li');
for(var i=0;i<lis.length;i++){
lis[i].onclick=function () {
for(var i=0;i<lis.length;i++){
lis[i].className = '';
}
this.className='current'
}
}
</script>
</body>
</html>

...全文

228 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

泡泡鱼_ 2021-05-13

打赏
举报

亲，这是问问题的地方，别把这里当成记笔记的……要记笔记，可以去内容管理里面自己发表文章然后，给你另一个思路：


[].forEach.call(document.querySelectorAll("li"), function (li) {
        li.onclick = function () {
          const current = document.querySelector("li.current")

          if(current !== this){
            current.className = ""
            this.className = "current"
          }
        }
      })

有类似babel-polyfill的话，可以直接:Array.from(document.querySelectorAll("li")).forEach