jquery页签效果

最新推荐文章于 2022-06-08 14:54:27 发布

「已注销」

最新推荐文章于 2022-06-08 14:54:27 发布

阅读量629

点赞数

前段时间做一个项目，其中界面部分要用到的tabs页签网上已经有很多很多现成的可以用，也用了下jquery-ui里面的tabs，感觉大了点，自己的需求并不复杂，还是自己动手写写吧，目的为了让html更干净点。

纯属记录自己写的东西，先来个图

 
         < 
         div 
         class 
         = 
         "tabs" 
         > 
        
 
              
         < 
         ul 
         id 
         = 
         "tabs" 
         > 
        
 
                  
         < 
         li 
         class 
         = 
         "tab-nav" 
         >管理导航</ 
         li 
         > 
        
 
                  
         < 
         li 
         class 
         = 
         "tab-nav-action" 
         >系统设置</ 
         li 
         > 
        
 
                  
         < 
         li 
         class 
         = 
         "tab-nav" 
         >用户管理</ 
         li 
         > 
        
 
                  
         < 
         li 
         class 
         = 
         "tab-nav" 
         >内容管理</ 
         li 
         > 
        
 
                  
         < 
         li 
         class 
         = 
         "tab-nav" 
         >其他管理</ 
         li 
         > 
        
 
              
         </ 
         ul 
         > 
        
 
         </ 
         div 
         > 
        
 
         < 
         div 
         id 
         = 
         "tabs-body" 
         class 
         = 
         "tabs-body" 
         > 
        
 
              
         < 
         div 
         style 
         = 
         "display:block" 
         > 
        
 
              
         1111111 
        
 
              
         </ 
         div 
         > 
        
 
              
         < 
         div 
         style 
         = 
         "display:none" 
         > 
        
 
              
         222222222 
        
 
              
         </ 
         div 
         > 
        
 
              
         < 
         div 
         style 
         = 
         "display:none" 
         > 
        
 
              
         33333333333 
        
 
              
         </ 
         div 
         > 
        
 
              
         < 
         div  
         style 
         = 
         "display:none" 
         > 
        
 
              
         4444444444 
        
 
              
         </ 
         div 
         > 
        
 
              
         < 
         div  
         style 
         = 
         "display:none" 
         > 
        
 
              
         555555555555555 
        
 
              
         </ 
         div 
         > 
        
 
         </ 
         div 
         > 
        

　　样式

 
         .tabs { 
        
         float 
         : 
         left 
         ; 
        
         background-image 
         :  
         url 
         (themes/images/nav_bg.jpg); 
        
         width 
         : 
         100% 
         ; 
        
         } 
        
         .tabs ul  
        
         { 
        
         list-style 
         :  
         none 
         outside 
         none 
         ; 
        
         margin 
         :  
         0 
         ; 
        
         padding 
         :  
         0 
         ; 
        
         } 
        
         .tabs ul li 
        
         { 
        
         float 
         :  
         left 
         ; 
        
         line-height 
         :  
         24px 
         ; 
        
         margin 
         :  
         0 
         ; 
        
         padding 
         :  
         2px 
         20px 
          0 
         15px 
         ; 
        
         } 
        
         .tab-nav{ 
        
         background 
         :  
         url 
         (themes/images/manage_r 
         2 
         _c 
         14 
         .jpg)  
         no-repeat 
         ; 
        
         cursor 
         : 
         pointer 
         ; 
        
         } 
        
         .tab-nav-action{ 
        
         background 
         :  
         url 
         (themes/images/manage_r 
         2 
         _c 
         13 
         .jpg)  
         no-repeat 
         ; 
        
         cursor 
         : 
         pointer 
         ; 
        
         } 
        
         .tabs-body 
        
         { 
        
         border-bottom 
         :  
         1px 
         solid 
          #B4C9C6 
         ; 
        
         border-left 
         :  
         1px 
         solid 
          #B4C9C6 
         ; 
        
         border-right 
         :  
         1px 
         solid 
          #B4C9C6 
         ; 
        
         float 
         :  
         left 
         ; 
        
         padding 
         :  
         5px 
         0 
          0 
         ; 
        
         width 
         :  
         100% 
         ; 
        
         } 
        
         .tabs-body div  
        
         { 
        
         padding 
         : 
         10px 
         ; 
        
         }

　　jquery代码

 
  <script type= 
  "text/javascript" 
  > 
 
  $(document).ready( 
  function 
  () { 
 
  $( 
  "#tabs li" 
  ).bind( 
  "click" 
  ,  
  function 
   () { 
 
  var 
  index = $( 
  this 
  ).index(); 
 
  var 
  divs = $( 
  "#tabs-body > div" 
  ); 
 
  $( 
  this 
  ).parent().children( 
  "li" 
  ).attr( 
  "class" 
  ,  
  "tab-nav" 
  ); 
  //将所有选项置为未选中 
 
  $( 
  this 
  ).attr( 
  "class" 
  ,  
  "tab-nav-action" 
  );  
  //设置当前选中项为选中样式 
 
  divs.hide(); 
  //隐藏所有选中项内容 
 
  divs.eq(index).show();  
  //显示选中项对应内容 
 
  }); 
 
  }); 
 
  </script>