jQery实战之tab选项卡效果
web2.0时代，tab选项卡被广泛的运用在页面中，下面通过这一实例，介绍如何用jQuery快速实现tab的方法。
下面是效果图：
下面是本实例的完整代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb-2312">
5 <title>tab</title>
6 <script type="text/javascript" src="jquery-1.4.2.js"></script>
7 <style type="text/css">
8 body{ font-size:13px;}
9 ul,li{ margin:0; padding:0; text-align:center;list-style:none}
10 #menu li{ text-align:center; float:left; padding:5px; margin-right:2px; width:50px; cursor:pointer;}
11 #menu li.tabFocus{ width:50px; font-weight:bold; background:#eee; border:1px solid #555; border-bottom:0 none; z-index:100; position:relative;}
12 #content{ width:260px; height:80px; padding:10px; background:#f3f2e1; clear:left; border:1px solid #666; position:relative; top:-1px;}
13 #content li{display:none;}
14 #content li.conFocus{ display:block;}
15 </style>
16 </head>
17 <body>
18 <script type="text/javascript">
19 $(function(){
20 //遍历选项卡
21 $("#menu li").each(function(index){
22 $(this).click(function(){
23 $("#menu li.tabFocus").removeClass("tabFocus");
24 //增加当前选中项的样式
25 $(this).addClass("tabFocus");
26 //对应显示内容并隐藏其他内容
27 $("#content li").eq(index).show().siblings().hide();
28 })
29
30 })
31 })
32 </script>
33 <ul id="menu">
34 <li class="tabFocus">女人</li>
35 <li>男人</li>
36 <li>儿童</li>
37 </ul>
38 <ul id="content">
39 <li class="conFocus">漂亮的女人</li>
40 <li>健壮的男人</li>
41 <li>我是儿童</li>
42 </ul>
43 </body>
44 </html>
注：其中 $("#content li").eq(index).show().siblings().hide();也可以简写为 ：$("#content li:eq("+index+")").show().siblings().hide();
OK 完成了，很简单！
