基于jquery，9行js轻松实现tab控件

最新推荐文章于 2024-03-04 00:09:38 发布

简单的绿竹

最新推荐文章于 2024-03-04 00:09:38 发布

阅读量511

点赞数

分类专栏： JS

JS 专栏收录该内容

122 篇文章 0 订阅

订阅专栏

http://www.oschina.net/code/snippet_273800_15428

[代码]核心代码

 
  /** 
 
 
    
  * 考虑到tab和pane有可能被动态的添加和删除， 
 
 
    
  * 所以每次都废点时间去查找先前被激活的tab 
 
 
    
  */ 
 
 
  var 
   tab =  
  function 
  (tabId,activeId){ 
 
 
       
  $( 
  "#" 
  +tabId).delegate( 
  "li:not(#" 
  +activeId+ 
  ")" 
  , 
  "click" 
  , 
  function 
  (){ 
 
 
           
  $( 
  "#" 
  +$( 
  "#" 
  +activeId).attr( 
  "tar" 
  )).css( 
  "display" 
  , 
  "none" 
  ); 
 
 
           
  $( 
  "#" 
  +activeId).removeAttr( 
  "id" 
  ); 
 
 
            
 
 
           
  $( 
  this 
  ).attr( 
  "id" 
  ,activeId); 
 
 
           
  $( 
  "#" 
  +$( 
  this 
  ).attr( 
  "tar" 
  )).css( 
  "display" 
  , 
  "block" 
  ); 
 
 
       
  }); 
 
 
  }; 
 

demo代码

 
  <html> 
 
  <head> 
 
  <meta http-equiv= 
  "Content-Type" 
  content= 
  "text/html; charset=UTF-8" 
  > 
 
  <script type= 
  "text/javascript" 
  src= 
  "index.js" 
  ></script> 
 
  <script type= 
  "text/javascript" 
  src= 
  "jquery-1.8.2.js" 
  ></script> 
 
  </head> 
 
  <style> 
 
  li{ 
 
  border:1px solid 
  #b5e2f3; 
 
  border-bottom:0px; 
 
  float:left; 
 
  width:100px; 
 
  height:25px; 
 
  margin:0 7px; 
 
  background: 
  #F1FEF3; 
 
  padding:9px 0 0 0; 
 
  text-align:center; 
 
  color: 
  #33a3dc; 
 
  cursor:pointer; 
 
  } 
 
  ul{ 
 
  width:800; 
 
  height:36px; 
 
  border-bottom:1px solid 
  #b5e2f3;} 
 
  #selected{ 
 
  background: 
  #FFF!important; 
 
  border-bottom:2px solid 
  #FFF!important; 
 
  } 
 
  ul{margin:-1px;} 
 
  #cate1,#cate2, #cate3, #cate4, #cate5{ 
 
  clear:both; 
 
  height:300px; 
 
  background: 
  #FFFFFF; 
 
  width:800px; 
 
  height:100px; 
 
  padding:25px; 
 
  border:1px solid 
  #b5e2f3; 
 
  } 
 
  </style> 
 
  <body> 
 
  <div id= 
  "tab" 
  > 
 
  <ul> 
 
  <li tar= 
  "cate1" 
  id= 
  "selected" 
  >李开复</li> 
 
  <li tar= 
  "cate2" 
  >linus</li> 
 
  <li tar= 
  "cate3" 
  >李白</li> 
 
  <li tar= 
  "cate4" 
  >孔子</li> 
 
  </ul> 
 
  </div> 
 
  <div> 
 
  <div id= 
  "cate1" 
  style= 
  "display:block;" 
  > 
 
  李开复与中国大学生的近距离接触始于1990年，那时他受联合国邀请来华演讲两周。他到了很多高校，每次演讲结束时， 
 
  满屋子的学生都不愿离去。他们不停地抛出问题，想知道怎样才能成为一个被微软这样世界顶级公司认可的人才。“一定要帮帮他们。” 
 
  李开复说，自己被大学生渴望成才的热情感动了。之后，只要学生们给他写信，或者邀请他做演讲，他能做的，都会不遗余力。</div> 
 
  <div id= 
  "cate2" 
  style= 
  "display:none;" 
  > 
 
  Linus Torvalds，Linux核心的创作者，于1969 年12月28 日出生在芬兰的赫尔辛基。“有些人生来就具有统率百万 
 
  人的领袖风范；另一些人则是为写出颠覆世界的软件而生。唯一一个能同时做  linus到这两者的人，就是托瓦兹。”美国《时代》 
 
  周刊对Linux之父李纳斯·托瓦兹（Linus Torvalds）给出了极高的评价。甚至，在《时代》周刊根据读者投票评选出的二十世纪 
 
  100位最重要人物中， 李纳斯居然排到了第15位，而从20世纪的最后几年就开始霸占全球首富称号的盖茨不过才是第17位。</div> 
 
  <div id= 
  "cate3" 
  style= 
  "display:none;" 
  > 
 
  小隐慕安石。远游学子平。天书访江海。云卧起咸京。入侍瑶池宴。出陪玉辇行。夸胡新赋作。 
 
  谏猎短书成。但奉紫霄顾。非邀青史名。庄周空说剑。墨翟耻论兵。拙薄遂疏绝。归闲事耦耕。 
 
  顾无苍生望。空爱紫芝荣。寥落暝霞色。微茫旧壑情。秋山绿萝月。今夕为谁明。 
 
  </div> 
 
  <div id= 
  "cate4" 
  style= 
  "display:none;" 
  > 
 
  君于惠而不费，劳而不怨，欲而不贪，泰而不骄，威而不猛。 
 
  ……因民之利而利之，斯不亦惠而不费乎？择可劳而劳之，又谁怨？欲仁而得仁，又焉贪？君子无众寡、 
 
  无小大、无敢慢，斯不亦泰而不骄乎？君子正其衣冠，尊其瞻视，俨然人望而畏之，斯不亦威而不猛乎？</div> 
 
  </div> 
 
  </body> 
 
  <script> 
 
  tab( 
  "tab" 
  , 
  "selected" 
  ); 
 
  </script> 
 
  </html>