tab选项卡

Css:

 1 <style type="text/css"> 
 2 ul,li,div{ margin:0; padding:0;}  
 3 ul,li{ list-style:none;}  
 4 .tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}  
 5 .tab{ background:#F93; overflow:hidden; width:450px;}  
 6 .tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}  
 7 .tab li.on{background:#F60;}  
 8 .tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }  
 9 .tabContent .hide{ display:none;}  
10 </style>

Html:

 1     <div class="tabWrap"> 
 2         <ul class="tab"> 
 3             <li>选项卡1</li> 
 4             <li>选项卡2</li> 
 5             <li>选项卡3</li> 
 6         </ul> 
 7         <div class="tabContent"> 
 8             <div class="p-content">1111</div> 
 9             <div class="p-content hide">222</div> 
10             <div class="p-content hide">3333</div> 
11         </div> 
12     </div> 
13       
14     <br/> 
15     <br/> 
16     <div class="tabWrap"> 
17         <ul class="tab"> 
18             <li>选项卡1</li> 
19             <li>选项卡2</li> 
20             <li>选项卡3</li> 
21         </ul> 
22         <div class="tabContent"> 
23             <div class="p-content">1111</div> 
24             <div class="p-content hide">222</div> 
25             <div class="p-content hide">3333</div> 
26         </div> 
27     </div>

Javascript:

 1 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
 2 <script type="text/javascript">  
 3     $(function(){  
 4         function tabs(tabMenu,on,tabContent){  
 5         $(tabContent).each(function(){  
 6             $(this).children().eq(0).show();      
 7         });   
 8         $(tabMenu).each(function(){  
 9             $(this).children().eq(0).addClass(on);    
10         });  
11         $(tabMenu).children().hover(function(){  
12             $(this).addClass(on).siblings().removeClass(on);  
13             var index = $(tabMenu).children().index(this);  
14             $(tabContent).children().eq(index).show().siblings().hide();      
15         });  
16     }  
17     tabs(".tab","on",".tabContent");  
18 })  
19           
20     </script>

PS：现在的选项卡为鼠标滑过，若想改成鼠标点击的，把JS中的"hover"改为"click"即可。