问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
1608
    9114

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

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

    图片描述

    代码段：

    <!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.hover {
           background-color: #CCC;
       }
   
       #list li a {
           text-decoration: none;
       }    
    </style>    
    <script>
       window.onload = function () {
           //需求：点击哪个a链接，让其对应的li标签添加类(.current)
           //需求：鼠标经过哪个a链接，其对应li标签的背景色变灰(.hover)

           var ul = document.getElementById("list");
           var liArr = ul.children;
           var a = ul.getElementsByTagName("a");

           for(var i=0;i<liArr.length;i++){
               a[i].onclick = function () {
                   //排他思想
                   for(var j=0;j<liArr.length;j++){
                       liArr[j].className = "";
                   }
                   this.parentNode.className = "current";
               }
           }
   
       }    
    </script> 
</head> 
<body>
   <div id="menu">
       <ul id="list">
           <li class="current"><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>
           <li><a href="javascript:void(0)">帮助</a></li>
       </ul>    
    </div>
 </body>  
 </html>
    javascriptcsshtml
    阅读 2k
    1 个回答
    得票最新
    头像
    月影
      2.7k1726
      ✓ 已被采纳

      需求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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题