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即可

附截图