当前位置:新闻资讯

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

日期:2020-05-25 09:29:09 作者:http://www.zhanmanet.com 浏览量:0
  许多小伙伴想要制作一个当前跳转导航添加选中样式,实现这种效果的方法有很多种,今天,小编分享大家的是jquery的实例,为今使用做个参考。
  
  要实现效果有两种方式:一种是直接当前面添加特殊样式,但当面刷新或者跳转到下一,样式消失;另一种是即使刷新面或跳转下一样式仍然有效。


第一种:

<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>
 
第二种:
<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> 

以上就是栈码网络小编为您整理的当前跳转导航添加选中样式的方法,更多网站制作的知识可在栈码网络的官网上获取。