案例：tab切換效果 獲取所有的li標簽 第一件事：把這個a所在的所以兄弟元素的類樣式全部移除 (removeAttributes) 第二件事：當前點擊的a父級元素li (點擊這個a所在的所在元素li)，設置背景顏色 (this.parentNode.className) <!DOCTYPE htm ...
案例：tab切換效果
獲取所有的li標簽
第一件事：把這個a所在的所以兄弟元素的類樣式全部移除 (removeAttributes)
第二件事：當前點擊的a父級元素li (點擊這個a所在的所在元素li)，設置背景顏色 (this.parentNode.className)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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 { background-color: burlywood; } #list li a { text-decoration: none; } </style> </head> <body> <div id="menu"> <ul id="list"> <li class="current"><a href="http://www.baidu.com">首頁</a> </li> <li><a href="javascript:void(0)">播客</a></li> <li><a href="javascript:void(0)">博客</a></li> <li><a href="javascript:void(0)">相冊</a></li> <li><a href="javascript:void(0)">關於</a></li> <li><a href="javascript:void(0)">幫助</a></li> </ul> </div> <script src="common.js"></script> <script> //獲取所有的li標簽 var liObjs = my$("list").getElementsByTagName("li"); //迴圈遍歷，找到每個li中的a，註冊點擊事件 for (var i = 0; i < liObjs.length; i++) { //每個li中的a var aObj = getFirstElement(liObjs[i]); aObj.onclick = function () { //第一件事：把這個a所在的所以兄弟元素的類樣式全部移除 for (var j = 0; j < liObjs.length; j++) { liObjs[j].removeAttribute("class"); } //第二件事：當前點擊的a父級元素li (點擊這個a所在的所在元素li)，設置背景顏色 this.parentNode.className = "current"; return false;//阻止超鏈接跳轉 }; } </script> </body> </html>
