锋利的jquery 网页选项卡

 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>