<ul>
<li>首页</li>
<li>服务</li>
<li>案例</li>
<li>客户</li>
<li>动态</li>
<li>口碑</li>
<li>关于</li>
<li>联系</li>
</ul>
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";
}
}
}
效果显示:
————————————————
版权声明:本文为CSDN博主「那一转眼」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Sx081/article/details/121061905