1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 .tab{ 12 width:240px; 13 margin:50px; 14 /*border:1px solid;*/ 15 } 16 .tab_menu{ 17 clear:both; 18 } 19 .tab_menu li{ 20 float:left; 21 text-align:center; 22 list-style:none; 23 background:#F1F1F1; 24 border:1px solid #898989; 25 margin-right:4px; 26 cursor:pointer; 27 padding:1px 6px; 28 border-bottom:none; 29 30 } 31 .tab_menu li.hover{ 32 background:#DFDFDF; 33 } 34 .tab_menu li.selected{ 35 color:#FFF; 36 background:#6D84B4; 37 } 38 .tab_box{ 39 clear:both; 40 height:100px; 41 border:1px solid #898989; 42 } 43 .hide{ 44 display:none; 45 } 46 </style> 47 <script src="js/jquery.1.9.1.js" type="text/javascript" charset="utf-8"></script> 48 49 <script type="text/javascript" > 50 51 $(function(){ 52 var lis =$("div.tab_menu ul li"); 53 lis.click(function(){ 54 $(this).addClass("selected") //当前<li>元素高亮 55 .siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮 56 var index = $(this).index(); // 重点获取当前点击的<li>元素 在 全部li元素中的索引。 57 $("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div 58 .eq(index).show() //显示 <li>元素对应的<div>元素 59 .siblings().hide(); //隐藏其它几个同辈的<div>元素 60 }) 61 }) 62 63 </script> 64 65 </head> 66 67 <body> 68 <div class="tab"> 69 <div class="tab_menu"> 70 <ul> 71 <li class="selected">时事</li> 72 <li>体育</li> 73 <li>娱乐</li> 74 </ul> 75 </div> 76 <div class="tab_box"> 77 <div>时事</div> 78 <div class="hide">体育</div> 79 <div class="hide">娱乐</div> 80 </div> 81 </div> 82 </body> 83 </html>
效果图：
