1 <html> 2 <head> 3 <style type="text/css"> 4 .tab_menu{ 5 border:0px solid red; 6 height:18px; 7 width:200px; 8 } 9 ul{ 10 list-style:none; 11 display:inline; 12 } 13 li{ 14 float:left; 15 margin:0 3px; 16 border:1px solid grey; 17 font-size:80%; 18 } 19 .selected{ 20 background-color:red; 21 } 22 .tab_box{ 23 margin:0 0px; 24 } 25 .tab_box div{ 26 height:30px; 27 width:200px; 28 border:1px solid red; 29 margin:0 3px; 30 } 31 .hide{ 32 display:none; 33 } 34 </style> 35 </head> 36 37 <body> 38 39 <div class="tab_menu"> 40 <ul> 41 <li class="selected">时事</li> 42 <li>体育</li> 43 <li>娱乐</li> 44 </ul> 45 </div> 46 47 <div class="tab_box"> 48 <div>时事</div> 49 <div class="hide">体育</div> 50 <div class="hide">娱乐</div> 51 </div> 52 53 <script src="jquery-1.7.2.js"></script> 54 <script type="text/javascript"> 55 var div_li=$('div.tab_menu ul li') 56 div_li.click(function(){ 57 $(this).addClass("selected") 58 .siblings().removeClass("selected"); 59 60 var index=div_li.index(this); 61 $("div.tab_box > div") 62 .eq(index).show() 63 .siblings().hide(); 64 }); 65 66 </script> 67 68 </body> 69 </html>
