AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.wanshiok.com
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给当前页或者跳转后页面的导航栏添加选中后样式的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持wanshiok.com。


jquery导航栏样式  
上一篇:Vue概念及常见命令介绍(1)  下一篇:jquery二级目录选中当前页的css样式