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==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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM