手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >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> <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>

第二种情况:

<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> <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给当前页或者跳转后页面的导航栏添加选中后样式的实例】相关文章:

JQuery给网页更换皮肤的方法

JavaScript实现单击下拉框选择直接跳转页面的方法

一个表格收缩展开的函数

获得当前页面URL地址的三个JS代码

JQuery插件jcarousellite的参数中文说明

Jquery中基本选择器用法实例详解

JavaScript实现广告的关闭与显示效果实例

jQuery实现在列表的首行添加数据

JQuery实现动态添加删除评论的方法

JQuery实现带排序功能的权限选择实例

精品推荐
分类导航