首页 > 代码库 > Jquery给当前页或者跳转后页面的导航栏添加选中后样式
Jquery给当前页或者跳转后页面的导航栏添加选中后样式
解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失;另一种情况是即使刷新页面后样式仍然有效。
直接上代码:
第一种情况:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | < 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 > |
第二种情况:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < 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=http://www.mamicode.com/=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 > |
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。