怎么使用js实现导航点击变颜色,再点击下一个,上一个恢复原来的颜色?
发布网友
发布时间：2022-04-23 13:32
共2个回答
热心网友
时间：2022-04-23 05:32
<!DOCTYPE HTML>
<html>
<head>
<meta charset="GBK">
<style>
.dh{
width: 100px;
height: 30px;
background: brown;
list-style-type: none;
float: left;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.dh:hover{
cursor: pointer;
color: white;
background: burlywood;
}
</style>
<script type="text/javascript">
window.onload = function() {
var dh = document.getElementById('nv_bar');
var menulist=document.getElementsByClassName("dh");
//console.info( menulist );
//使用委托机制。绑定父元素。不要绑定子元素。根据冒泡原理，点击子元素，默认会触发父元素点击事件。
dh.onclick = function(e) {
if(e.target.className=="dh"){
//1 先记录颜色
var color;
if(e.target.style.background = 'brown') {
color = 'burlywood';
}else {
color = 'brown';
}
//2 统一还原
for(var i=0;i<menulist.length;i++)menulist[i].style.background="brown";
//3 单独设置点击的那个
e.target.style.background=color;
}
}
}
</script>
</head>
<body>
<ul id="nv_bar">
<li class="dh" >导航一</li>
<li class="dh">导航2</li>
<li class="dh" >导航3</li>
<li class="dh" >导航4</li>
<li class="dh" >导航5</li>
</ul>
</body>
</html>
问题：
1 id不能有多个。否则document.getElementById获取出来的只是第一个。
2 不要根据颜色判断。你自定义标识。比如 state=0或1 或者active=true|false
通过setAttribute(key,value);存到li身上。
3 对于这种多元素点击事件。不要把时间绑定在子元素身上。最好绑定在父元素身上。委托机制。
4 网页结构要重视。不要太随意，虽然浏览器也可以解析。
5 编码最好要指定。
多的不说了，可以自己看一下w3c文档。或者javascript高级编程。
热心网友
时间：2022-04-23 06:50
