手机
当前位置:查字典教程网 >编程开发 >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实现给页面换肤的方法

原生JS和JQuery动态添加、删除表格行的方法

JQuery插件jcarousellite的参数中文说明

Jquery使用css方法改变样式实例

js操作css属性实现div层展开关闭效果的方法

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

JQuery球队选择实例

javascript实现淡蓝色的鼠标拖动选择框实例

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

jQuery实现页面内锚点平滑跳转特效的方法总结

精品推荐
分类导航