怎么使用js实现导航点击变颜色，再点击下一个，上一个恢复原来的颜色？
<style>#dh{width:100px;height:30px;background:brown;list-style-type:none;float:left;l...
<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('dh');
dh.onclick = function() {
if(dh.style.background = 'brown') {
dh.style.background = 'burlywood';
} else {
dh.style.background = 'brown';
}
}
}
</script>
</head>
<body>
<ul>
<li id="dh">导航一</li>
<li id="dh">导航2</li>
<li id="dh">导航3</li>
<li id="dh">导航4</li>
<li id="dh">导航5</li>
</ul>
</body> 展开
#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('dh');
dh.onclick = function() {
if(dh.style.background = 'brown') {
dh.style.background = 'burlywood';
} else {
dh.style.background = 'brown';
}
}
}
</script>
</head>
<body>
<ul>
<li id="dh">导航一</li>
<li id="dh">导航2</li>
<li id="dh">导航3</li>
<li id="dh">导航4</li>
<li id="dh">导航5</li>
</ul>
</body> 展开
2个回答
展开全部
哥们，你这代码存在诸多问题。帮你修改了一下。如下，你先拿去用。我最后再点评，有什么问题存在。
<!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高级编程。
<!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高级编程。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这很简单啊，在CSS中设置链接，再来设置它的：hover，visted，active属性就行了。
追问
这个不行的，试过好多遍了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
