tab选项卡在网上是很常见的一种效果 网站当中随处可见 特别是大型网站到处都是，但是写tab这种效果 用的方式可能不一样 有的是YUI写的 用的是用KISSY写的 有的是用原审js写的 也有的是以Jquery框架写的 但是我这里是用Jquery来封装tab选项卡的 在js中我用了Jquery中的children()这个方法 获取父类中直接子元素，记住一定是直接子元素 假入说要获取子元素的div当中的a标签 比如这样获取 $("父类").children("div a");想获取a标签是获取不到的 只能获取到div标签！！我以前做页面时候就碰到过这种情况！OK  其实用Jquery来封装tab选项卡是非常简单的一件事情！只要几行代码 就ok了！下面是我的HTML结构及CSS

 

   
   
   
   
    
    
    
    
    
  1. <style type="text/css"> 
    2. 
    
    
    
    
  2. ul,li,div{ margin:0; padding:0;}  
    3. 
    
    
    
    
  3. ul,li{ list-style:none;}  
    4. 
    
    
    
    
  4. .tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}  
    5. 
    
    
    
    
  5. .tab{ background:#F93; overflow:hidden; width:450px;}  
    6. 
    
    
    
    
  6. .tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}  
    7. 
    
    
    
    
  7. .tab li.on{background:#F60;}  
    8. 
    
    
    
    
  8. .tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }  
    9. 
    
    
    
    
  9. .tabContent .hide{ display:none;}  
    10. 
    
    
    
    
  10. style> 
    11. 
    
    
    
    
  11. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">script> 
    12. 
    
    
    
    
  12.     head> 
    13. 
    
    
    
    
  13.     <body> 
    14. 
    
    
    
    
  14.         <div class="tabWrap"> 
    15. 
    
    
    
    
  15.         <ul class="tab"> 
    16. 
    
    
    
    
  16.             <li>选项卡1li> 
    17. 
    
    
    
    
  17.             <li>选项卡2li> 
    18. 
    
    
    
    
  18.             <li>选项卡3li> 
    19. 
    
    
    
    
  19.         ul> 
    20. 
    
    
    
    
  20.         <div class="tabContent"> 
    21. 
    
    
    
    
  21.             <div class="p-content">1111div> 
    22. 
    
    
    
    
  22.             <div class="p-content hide">222div> 
    23. 
    
    
    
    
  23.             <div class="p-content hide">3333div> 
    24. 
    
    
    
    
  24.         div> 
    25. 
    
    
    
    
  25.     div> 
    26. 
    
    
    
    
  26.       
    27. 
    
    
    
    
  27.     <br/> 
    28. 
    
    
    
    
  28.     <br/> 
    29. 
    
    
    
    
  29.     <div class="tabWrap"> 
    30. 
    
    
    
    
  30.         <ul class="tab"> 
    31. 
    
    
    
    
  31.             <li>选项卡1li> 
    32. 
    
    
    
    
  32.             <li>选项卡2li> 
    33. 
    
    
    
    
  33.             <li>选项卡3li> 
    34. 
    
    
    
    
  34.         ul> 
    35. 
    
    
    
    
  35.         <div class="tabContent"> 
    36. 
    
    
    
    
  36.             <div class="p-content">1111div> 
    37. 
    
    
    
    
  37.             <div class="p-content hide">222div> 
    38. 
    
    
    
    
  38.             <div class="p-content hide">3333div> 
    39. 
    
    
    
    
  39.         div> 
    40. 
    
    
    
    
  40.     div> 
    41.

我这边HTML是用了两个一样的结构及样式  是为了测试js在一个页面上多次调用是否成功！JS代码如下：
 

   
   
   
   
    
    
    
    
    
  1. "text/javascript">  
    2. 
    
    
    
    
  2.     $(function(){  
    3. 
    
    
    
    
  3.         function tabs(tabMenu,on,tabContent){  
    4. 
    
    
    
    
  4.         $(tabContent).each(function(){  
    5. 
    
    
    
    
  5.             $(this).children().eq(0).show();      
    6. 
    
    
    
    
  6.         });   
    7. 
    
    
    
    
  7.         $(tabMenu).each(function(){  
    8. 
    
    
    
    
  8.             $(this).children().eq(0).addClass(on);    
    9. 
    
    
    
    
  9.         });  
    10. 
    
    
    
    
  10.         $(tabMenu).children().hover(function(){  
    11. 
    
    
    
    
  11.             $(this).addClass(on).siblings().removeClass(on);  
    12. 
    
    
    
    
  12.             var index = $(tabMenu).children().index(this);  
    13. 
    
    
    
    
  13.             $(tabContent).children().eq(index).show().siblings().hide();      
    14. 
    
    
    
    
  14.         });  
    15. 
    
    
    
    
  15.     }  
    16. 
    
    
    
    
  16.     tabs(".tab","on",".tabContent");  
    17. 
    
    
    
    
  17. })  
    18. 
    
    
    
    
  18.           
    19. 
    
    
    
    
  19.      
    20.

引用上面的js就可以了！为了更清晰 待会把源文件放在附件里面 随时可以下载看看！下面说说写这个页面的js一点思路！

一 function tabs(tabMenu,on,tabContent){}  用这个函数来封装js 调用的方式是tabs(".tab","on",".tabContent"),其中tabMenu是指li外层ul on是指当鼠标移上去li 希望他有个背景 tabContent 是指content的外层！

二 接着用each来遍历 找到第一个子元素li增加一个类on 第一个content让她们显示！接着当鼠标移到任何一个li时候 让当前的li增加一个类on 同辈元素删除类on  然后索引当前的li 看是第几个 最后找出content  如果他的索引值和li的索引值相同的话 显示内容 同辈元素隐藏掉！思路就这么简单！！！！