在写导航条时总会遇到点击当前li变色，同级兄弟li无变化这个问题，困扰了我很久。具体思路如下：
1.html+css
- 首页
- 服务
- 案例
- 客户
- 动态
- 口碑
- 关于
- 联系
ul {
width: 800px;
height: 50px;
list-style: none;
}
ul li {
width: 10%;
height: 100%;
float: left;
margin-left: 1%;
background: cadetblue;
font-size: 20px;
text-align: center;
line-height: 2;
}
2.主要js
//获取每个li
var lis = document.querySelectorAll("ul li");
window.onload = function() {
//循环每个li
for (var i = 0; i < lis.length; i++) {
//每个li点击事件
lis[i].onclick = function() {
//再循环一遍li
for (var j = 0; j < lis.length; j++) {
//先把所有li的颜色变为黑色（或者清空）;
lis[j].style.color = "black";
}
//当前点击的li颜色改变
this.style.color = "red";
}
}
}
效果显示：