需求1 排他思想 效率比較差。不管li有沒有類別都操作一遍。如果記住有類名的li，只刪除這個(gè)li的類別是不是效率更高？
var ul = document.getElementById("list");
var liArr = ul.querySelectorAll("li");
var index = 0; //設(shè)置index記住有類名的li的下標(biāo) ，初始為 0
for(var i=0;i<liArr.length;i++){
liArr[i].index = i; // 設(shè)置當(dāng)前點(diǎn)擊的li的 下標(biāo) 等于索引值
liArr[i].onclick = function () {
liArr[index].className = ""; // li被點(diǎn)擊時(shí)候 移除類名為current的li的 類名
this.className = "current"; // 給當(dāng)前點(diǎn)擊的li添加類名current
index = this.index // li 類名為current的 下標(biāo) 就變成了 當(dāng)前點(diǎn)擊的li下標(biāo)
}
}
加強(qiáng)版：事件委托比for循環(huán)效率更高
<script>
window.onload = function () {
var oMenu =document.getElementById("#menu");
oMenu.onclick = function (e) {
oCur= oMenu.querySelector(".current");
if(oCur){oCur.className="";}
e = e || window.event;
var tag = e.target || e.srcElement;
if(tag.nodeName.toLocaleLowerCase()=="a"){
tag.parentNode.className = "current"
}
};
}
</script>
需求2 鼠標(biāo)經(jīng)過請使用css實(shí)現(xiàn)，樣式如下
<style>
#list li {
list-style-type: none;
width: 80px;
height: 30px;
line-height: 30px;
background-color:beige;
text-align: center;
float: left;
margin-left: 5px;
}
#list li.current,#list li.current:hover {
background-color: burlywood;
}
#list li:hover {
background-color: #CCC;
}
#list li a {
display: block;
text-decoration: none;
}
</style>
