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
