1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>jQuery 选项卡</title> 6 <style> 7 *{ margin:0; padding:0;} 8 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} 9 .tab { width:240px;margin:50px;} 10 .tab_menu { clear:both;} 11 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;} 12 .tab_menu li.hover { background:#DFDFDF;} 13 .tab_menu li.selected { color:#FFF; background:#6D84B4;} 14 .tab_box { clear:both; border:1px solid #898989; height:100px;} 15 .hide{display:none} 16 </style> 17 <script src="http://www.gamejzy.com/js/jquery.js" type="text/javascript"></script> 18 </head> 19 <body> 20 <div class="tab"> 21 <div class="tab_menu"> 22 <ul> 23 <li class="selected">时事</li> 24 <li>体育</li> 25 <li>娱乐</li> 26 </ul> 27 </div> 28 <div class="tab_box"> 29 <div>时事</div> 30 <div class="hide">体育</div> 31 <div class="hide">娱乐</div> 32 </div> 33 </div> 34 35 </body> 36 </html> 37 <script type="text/javascript"> 38 $(function(){ 39 var $li = $("div.tab_menu ul li"); 40 $li.click(function(){ 41 $(this).addClass('selected') //当前<li>元素高亮 42 .siblings().removeClass('selected'); //去掉其它同辈<li>元素的高亮 43 var index = $("div.tab_menu ul li").index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。 44 $('div .tab_box > div') //选取子节点。不选取子节点的话，会引起错误。如果里面还有div 45 .eq(index).show() //显示 <li>元素对应的<div>元素 46 .siblings().hide(); //隐藏其它几个同辈的<div>元素 47 .hover(function(){ 48 $(this).addClass('hover'); 49 }, function(){ 50 $(this).removeClass('hover'); 51 }) 52 }) 53 }) 54 55