<!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高級編程。