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

发布:2019/3/11 16:37:07    浏览:

第一种情况:

<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> 


与我联系
扫二维码与我沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

网站建设、响应式网站开发、微信/小程序开发、淘宝运营、公众号运营、网站优化seo