给当前页或者跳转后页面的导航栏添加选中样式

￡神魔★判官ぃ 2022-09-24 10:25 174阅读 0赞

**用Jquery(js)给当前页或者跳转后页面的导航栏添加选中**

当鼠标选中页面导航栏的某一栏目后，如何给选中栏目添加特殊样式，一直没怎么搞清楚，今天学习了一下，并做个总结。

![给当前页或者跳转后页面的导航栏添加选中样式][48540923dd54564eccc8eecbb5de9c82d0584f96.jpg]

## 工具/原料    ##

*  JQuery
 *  JS

## 方法/步骤    ##

1.  这边有两种情况，一种是直接给当前页面添加特殊样式，当网页刷新或者跳转到下一页后，样式消失；另一种情况是即使刷新页面后样式仍然有效。直接上代码。
    
    第一种情况：
    
    \[html\] 
    
    在CODE上查看代码片派生到我的代码片
    
    <script type="text/javascript" src="templets/js/jquery.js"></script>  
    
    <script type="text/javascript">  
    
    $(document).ready(function()\{  
    
        $(".nav a").each(function()\{  
    
            $(this).click(function()\{  
    
                $(".nav .hover").removeClass("hover");  
    
                $(this).addClass("hover");    
    
                return false;//防止页面跳转  
    
            \});  
    
        \});  
    
    \});  
    
    </script>  
    
      
    
    <div class="nav">  
    
    <ul>  
    
        <li><a href="1.html" class="hover"> 首页</a></li>  
    
        <li><a href="2.html"> 个人资料</a></li>  
    
        <li><a href="3.html"> 我的好友</a></li>  
    
        <li><a href="4.html"> 消息管理</a></li>   
    
    </ul>     
    
    </div>  
2.  第二种情况：
    
    \[html\] 
    
    在CODE上查看代码片派生到我的代码片
    
    <script type="text/javascript" src="templets/js/jquery.js"></script>  
    
    <script type="text/javascript">  
    
    $(document).ready(function()\{  
    
        $(".nav a").each(function()\{  
    
            $this = $(this);  
    
            if($this\[0\].href==String(window.location))\{  
    
                $this.addClass("hover");  
    
            \}  
    
        \});  
    
    \});  
    
    </script>  
    
      
    
    <div class="nav">  
    
    <ul>  
    
        <li><a href="1.html"> 首页</a></li>  
    
        <li><a href="2.html"> 个人资料</a></li>  
    
        <li><a href="3.html"> 我的好友</a></li>  
    
        <li><a href="4.html"> 消息管理</a></li>   
    
    </ul>     
    
    </div>

[48540923dd54564eccc8eecbb5de9c82d0584f96.jpg]: /images/20220719/8df45e2070ad4069802a500c73f8625e.png