jquery tab切換，防止頁面刷新

tab切換，是一個很常見的效果，今天在項目中遇到這樣一個問題。就是切換后，頁面刷新，又重新定位到第一個上了，很是郁悶。

在網上找了很多jquery效果，都是這樣的，於是自己寫了一個。防止頁面刷新的tab切換，

html代碼:

 

 
           
           <! 
           DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
           > 
           
 
           
 
           < 
           html  
           xmlns 
           ="http://www.w3.org/1999/xhtml" 
           > 
           
 
           < 
           head 
           > 
           
     
           < 
           title 
           ></ 
           title 
           > 
           
      
           < 
           link  
           href 
           ="../Style/admin.css" 
            rel 
           ="stylesheet" 
            type 
           ="text/css" 
             
           /> 
           
      
           < 
           script  
           type 
           ="text/javascript" 
            src 
           ="System/js/jquery-1.7.min.js" 
           ></ 
           script 
           >  
           
      
           < 
           script  
           type 
           ="text/javascript" 
            src 
           ="tabs.js" 
           ></ 
           script 
           > 
           
      
           < 
           style  
           type 
           ="text/css" 
           > 
           
     .tabs 
           { 
            list-style 
           : 
           none 
           ; 
            width 
           : 
           400px 
           ; 
            height 
           : 
           23px 
           ; 
           } 
             
     .tabs  a  
           { 
           display 
           : 
           block 
           ; 
            float 
           : 
           left 
           ; 
           padding 
           : 
           2px 3px 
           ; 
            background 
           : 
           #eff7ff 
           ; 
            text-decoration 
           : 
           none 
           ; 
             margin-right 
           : 
           2px 
           ; 
           } 
           
     .tabs  a.current 
           { 
            background 
           : 
           #a1c6de 
           ; 
            color 
           : 
           #000 
           ; 
           } 
           
     .tab 
           { 
            display 
           : 
           block 
           ; 
            width 
           : 
           400px 
           ; 
            height 
           : 
           300px 
           ; 
            border 
           : 
           1px solid #ccc 
           ; 
           } 
           
      
           </ 
           style 
           > 
           
 
           </ 
           head 
           > 
           
 
           < 
           body 
           > 
           
  
           < 
           div  
           class 
           ="tabs" 
           >    
           
    
           < 
           a  
           href 
           ="#xiangmu" 
             
           >項目信息 
           </ 
           a 
           >  
           < 
           a  
           href 
           ="#kehu" 
           >客戶 
           </ 
           a 
           >< 
           a  
           href 
           ="#wenda" 
           >職位提問 
           </ 
           a 
           > 
           
  
           </ 
           div 
           > 
           
  
           < 
           div  
           id 
           ="xiangmu" 
            class 
           ="tab" 
           >項目信息 
           </ 
           div 
           > 
           
  
           < 
           div  
           id 
           ="kehu" 
            class 
           ="tab" 
           > 客戶 
           </ 
           div 
           > 
           
  
           < 
           div  
           id 
           ="wenda" 
            class 
           ="tab" 
           >職位提問  
           </ 
           div 
           > 
           
 
           
 
           </ 
           body 
           > 
           
 
           </ 
           html 
           > 
           
         

 

js代碼:

 

 
          
            $( 
           function () { 
           
    $("div.tab").hide();  
           // 
           隱藏所有 
           
    $("div.tabs a:first").addClass("current");  
           // 
           第一個元素選中 
           
    $("div.tab:first").show();  
           // 
           第一個內容顯示 
           
 
           
    $("div.tabs a").click( 
           function () { 
           
        $("div.tabs a").removeClass("current");  
           // 
           將所有的tab去掉current樣式 
           
        $(".tab").hide();  
           // 
           隱藏所有 
           
        $( 
           this).addClass("current"); 
           
         
           var activeTab = $( 
           this).attr("href");  
           // 
           獲取div 
           
        $(activeTab).show(); 
           
    }); 
           
 
           
     
           // 
           獲取從url中傳遞的 
           
     
           var url = window.location.href; 
           
     
           var reg = /#.+/; 
           
     
           if (reg.test(url)) { 
           // 
           含有#,默認為只有一個#，多個#情況不考慮   
           
         
           // 
           隱藏所有 
           
        $("div.tabs a").removeClass("current");  
           // 
           將所有的tab去掉current樣式 
           
        $(".tab").hide();  
           // 
           隱藏所有 
           
 
           
         
           var href = url.split('#')[1];        
           
        $("div.tabs [href=#" + href + "]").addClass("current"); 
           
        $("#" + href).show(); 
           
    } 
           
});      
           
         

 

代碼很簡單，思路也很清晰，不過很實用，

比如上例中，你刷新頁面，想重新定位到第二個tab上，只需要，重新指定xxx.aspx#kehu即可

附截圖