Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例_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>

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery导航栏样式
导航栏当前页高亮、导航栏当前页变色、a标签当前页跳转、当前页跳转、js 当前页跳转，以便于您获取更多的相关知识。