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