jQuery 网页选项卡

 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