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 rel="nofollow noopener noreferrer" href="1.html" class="hover"> 首页</a></li> 
  <li><a rel="nofollow noopener noreferrer" href="2.html"> 个人资料</a></li> 
  <li><a rel="nofollow noopener noreferrer" href="3.html"> 我的好友</a></li> 
  <li><a rel="nofollow noopener noreferrer" 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].rel="nofollow noopener noreferrer" href==String(window.location)){ 
      $this.addClass("hover"); 
    } 
  }); 
}); 
</script> 
  
<div class="nav"> 
<ul> 
  <li><a rel="nofollow noopener noreferrer" href="1.html"> 首页</a></li> 
  <li><a rel="nofollow noopener noreferrer" href="2.html"> 个人资料</a></li> 
  <li><a rel="nofollow noopener noreferrer" href="3.html"> 我的好友</a></li> 
  <li><a rel="nofollow noopener noreferrer" href="4.html"> 消息管理</a></li>  
</ul>   
</div>  

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

您可能有感兴趣的文章
JS获取鼠标点击时的位置

vue、nginx部署后刷新报404错误的解决方法

electron-builder配置项

VUE聊天页面自动滚动到底部

VUE CTRL+ENTER换行,ENTER发送消息