js实现导航菜单点击切换选中时高亮状态

最新推荐文章于 2024-01-04 18:29:48 发布

原创最新推荐文章于 2024-01-04 18:29:48 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #高亮 #页面切换 #导航

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的网页导航切换效果的实现方法，通过HTML、CSS和JavaScript来动态改变页面显示的内容和样式。当用户点击不同的导航选项时，相应的页面区域会显示或隐藏，同时导航文字的颜色也会发生变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

     <div id="headBoxFontHome" class="active">首页</div> 
     <div id="headBoxFontQuestion">常见问题</div>
     <div id="bogBox">
        <div id="homeBox"></div>
        <div id="qustionBox"></div>
    </div>
    
**css**

    active{color:red; }
    div{
          display: flex;
        justify-content: center;
        border-bottom: 1px solid;
        margin-right: 10px;
    }
    
**js**

       var home=document.getElementById("headBoxFontHome");
       var qustion=document.getElementById("headBoxFontQuestion");    
        var homeBox=document.getElementById("homeBox");
       var qustionBox=document.getElementById("qustionBox");
       var bigBox=document.getElementById("bigBox");
         var falg=1;
         var tag=1;
           home.onclick = function()
           { 
               falg = 1;     //修改标志位
               baobao(falg); 
           }
           qustion.onclick = function()
           { 
              falg = 2;
               baobao(falg);
           }
           function baobao(falg)
           {
               switch (falg)
               {
                   case 1:
                   {
                       home.className = "active";  
                       qustion.className = "";
                       homeBox.style.display="block"
                       qustionBox.style.display="none"
                   }
                       break;
                   case 2:
                   {
                        home.className = "";  
                        qustion.className = "active";  
                        homeBox.style.display="none"
                        qustionBox.style.display="block"
                   }
                       break;
                   default:
                       break;
               }
           }