如何制作加强版Tab菜单栏(最好利用原生JavaScript)？

Question

制作Tab菜单栏(利用原生JavaScript)
需求: 1.点击哪个a链接，让其对应的li标签添加类(.current)
需求: 2.鼠标经过哪个a链接，其对应li标签的背景色变灰(.hover)

需求1利用排他思想，此段代码已写好；需求2如果继续使用排他思想，怎么让所点击的a链接排除在外？也就是如何获取被点击的a链接所对应的位置，鼠标经过它不变色，两者不冲突？或者还有更好的方法？

代码段：

Answer 1

需求1 排他思想 效率比较差。不管li有没有类别都操作一遍。如果记住有类名的li，只删除这个li的类别是不是效率更高？&nbsp; &nbsp; var ul = document.getElementById("list");&nbsp; &nbsp; var liArr = ul.querySelectorAll("li");&nbsp; &nbsp; var index = 0; //设置index记住有类名的li的下标 ，初始为 0&nbsp; &nbsp; for(var i=0;i<liArr.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; liArr[i].index = i;&nbsp; // 设置当前点击的li的 下标 等于索引值&nbsp; &nbsp; &nbsp; &nbsp; liArr[i].onclick = function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; liArr[index].className = ""; //&nbsp; li被点击时候 移除类名为current的li的 类名&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.className = "current"; // 给当前点击的li添加类名current&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; index = this.index&nbsp; //&nbsp; li 类名为current的&nbsp; 下标 就变成了 当前点击的li下标&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }加强版：事件委托比for循环效率更高&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; window.onload = function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var oMenu =document.getElementById("#menu");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oMenu.onclick = function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oCur= oMenu.querySelector(".current");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(oCur){oCur.className="";}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e = e || window.event;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var tag = e.target || e.srcElement;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(tag.nodeName.toLocaleLowerCase()=="a"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tag.parentNode.className = "current"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>需求2 鼠标经过请使用css实现，样式如下&nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; #list li {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 80px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line-height: 30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color:beige;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: 5px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #list li.current,#list li.current:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: burlywood;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #list li:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #CCC;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; #list li a {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style>