导航首页 » 技术教程 » Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例 104 2024-02-09   

解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失;另一种情况是即使刷新页面后样式仍然有效。

直接上代码:

第一种情况:

<script type="text/javascript" src="http://www.gimoo.net/t/1810/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="http://www.gimoo.net/t/1810/1.html" class="hover"> 首页</a></li> 
  <li><a href="http://www.gimoo.net/t/1810/2.html"> 个人资料</a></li> 
  <li><a href="http://www.gimoo.net/t/1810/3.html"> 我的好友</a></li> 
  <li><a href="http://www.gimoo.net/t/1810/4.html"> 消息管理</a></li>  
</ul>   
</div>

第二种情况:

<script type="text/javascript" src="http://www.gimoo.net/t/1810/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="http://www.gimoo.net/t/1810/1.html"> 首页</a></li> 
  <li><a href="http://www.gimoo.net/t/1810/2.html"> 个人资料</a></li> 
  <li><a href="http://www.gimoo.net/t/1810/3.html"> 我的好友</a></li> 
  <li><a href="http://www.gimoo.net/t/1810/4.html"> 消息管理</a></li>  
</ul>   
</div>  

以上这篇Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持绿夏网。



!!!站长长期在线接!!!

网站、小程序:定制开发/二次开发/仿制开发等

各种疑难杂症解决/定制接口/定制采集等

站长微信:lxwl520520

站长QQ:1737366103