怎么使用js实现导航点击变颜色，再点击下一个，上一个恢复原来的颜色？

JavaScript012

怎么使用js实现导航点击变颜色，再点击下一个，上一个恢复原来的颜色？,第1张

哥们，你这代码存在诸多问题。帮你修改了一下。如下，你先拿去用。我最后再点评，有什么问题存在。

<!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=0i<menulist.lengthi++)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高级编程。

你js的id是dhjiage开头的，而php的id是dh开头，这两者应该改成一致才行；

其次，js的i是从0算起的，而php中的$k是从1算起的，这个也要改（$k++要放到后面）。

下面是我修改后且测试通过的代码：

<?php

$k=0

While($k<4){

echo "<span id='dhjiage".$k."'></span>"

$k++

}

?>

<script>

var x=0

for(var i=0i<4i++){

x=x+i

document.getElementById('dhjiage'+i).innerHTML=x

}

</script>