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

Question

制作Tab菜单栏(利用原生JavaScript)需求: 1.点击哪个a链接，让其对应的li标签添加类(.current)需求: 2.鼠标经过哪个a链接，其对应li标签的背景色变灰(.hover)需求1利用排他思想，此段代码已写好；需求2如果继续使用排他思想，怎么让所点击的a链接排除在外？也就是如何获取被点击的a链接所对应的位置，鼠标经过它不变色，两者不冲突？或者还有更好的方法？代码段：

Answer 1

需求1 排他思想 效率比较差。不管li有没有类别都操作一遍。如果记住有类名的li，只删除这个li的类别是不是效率更高？

    var ul = document.getElementById("list");

    var liArr = ul.querySelectorAll("li");

    var index = 0; //设置index记住有类名的li的下标 ，初始为 0

    for(var i=0;i<liArr.length;i++){

        liArr[i].index = i;  // 设置当前点击的li的 下标 等于索引值

        liArr[i].onclick = function () {

            liArr[index].className = ""; //  li被点击时候 移除类名为current的li的 类名

            this.className = "current"; // 给当前点击的li添加类名current

            index = this.index  //  li 类名为current的  下标 就变成了 当前点击的li下标

        }

    }

加强版：事件委托比for循环效率更高

    <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 鼠标经过请使用css实现，样式如下

      <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>