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