tab效果——支持tab标题的宽度自适应
自己做的tab效果，参考了jquery里tabs布,还不太完善，只是做了tab的基本效果
有时间了补充以下特点：
1.让current tab与其他tab等高
2.Ie浏览器下的圆角显示
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 <title>tabs</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 <script type="text/javascript" src="jquery-1.4.2.js"></script>
7 <style>
8 div,ul,li{padding:0;margin:0}
9 ul,li{list-style:none}
10 #tab{width:600px}
11 .tabs-hide{display:none}
12 .tab-nav:after{
13 clear:both;
14 content:".";
15 display:block;
16 height:0;
17 visibility:hidden;
18 }
19 * html .tab-nav {
20 height:1%;
21 }
22 .tab-nav {background:url(tab-nav.gif) repeat-x left bottom;padding:0 0 4px}
23 .tab-nav li{float:left;margin:0 0.2em 0 0;border:1px solid #94B4CA;border-bottom:0 none;white-space:nowrap;}
24 .tab-nav li.tab-in{background:url(tab-li.gif) repeat-x 0 0;top:1px;position:relative;}
25 .tab-nav li a{float:left;padding:0.5em 1em;text-decoration:none;}
26 .tab-nav li.tab-in a{cursor:default}
27 </style>
28 </head>
29 <body>
30 <div id="tab">
31 <ul class="tab-nav">
32 <li class="tab-default tab-in"><a href="#tab-0" >tab1</a></li>
33 <li class="tab-default"><a href="#tab-1" >tab2</a></li>
34 <li class="tab-default"><a href="#tab-2" >tab3</a></li>
35 </ul>
36 <div id="tab-0">aaaa</div>
37 <div id="tab-1" class="tabs-hide">bbbbbbbbbb</div>
38 <div id="tab-2" class="tabs-hide">cccccccccc</div>
39 </div>
40 <script>
41 var _index = 0;
42 $("#tab .tab-default a").click(function(){
43 if($(this).parent().hasClass("tab-in")) return;
44 var _divShow = $(this).attr("href");
45
46 $(this).parent().addClass("tab-in");
47 $(".tab-default:eq("+_index+")").removeClass("tab-in");
48
49 $(_divShow).removeClass("tabs-hide");
50 $("#tab-"+_index).addClass("tabs-hide");
51
52
53 _index = _divShow.substr(5);
54 })
55 </script>
56 </body>
57 </html>
58
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>tabs</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 <script type="text/javascript" src="jquery-1.4.2.js"></script>
7 <style>
8 div,ul,li{padding:0;margin:0}
9 ul,li{list-style:none}
10 #tab{width:600px}
11 .tabs-hide{display:none}
12 .tab-nav:after{
13 clear:both;
14 content:".";
15 display:block;
16 height:0;
17 visibility:hidden;
18 }
19 * html .tab-nav {
20 height:1%;
21 }
22 .tab-nav {background:url(tab-nav.gif) repeat-x left bottom;padding:0 0 4px}
23 .tab-nav li{float:left;margin:0 0.2em 0 0;border:1px solid #94B4CA;border-bottom:0 none;white-space:nowrap;}
24 .tab-nav li.tab-in{background:url(tab-li.gif) repeat-x 0 0;top:1px;position:relative;}
25 .tab-nav li a{float:left;padding:0.5em 1em;text-decoration:none;}
26 .tab-nav li.tab-in a{cursor:default}
27 </style>
28 </head>
29 <body>
30 <div id="tab">
31 <ul class="tab-nav">
32 <li class="tab-default tab-in"><a href="#tab-0" >tab1</a></li>
33 <li class="tab-default"><a href="#tab-1" >tab2</a></li>
34 <li class="tab-default"><a href="#tab-2" >tab3</a></li>
35 </ul>
36 <div id="tab-0">aaaa</div>
37 <div id="tab-1" class="tabs-hide">bbbbbbbbbb</div>
38 <div id="tab-2" class="tabs-hide">cccccccccc</div>
39 </div>
40 <script>
41 var _index = 0;
42 $("#tab .tab-default a").click(function(){
43 if($(this).parent().hasClass("tab-in")) return;
44 var _divShow = $(this).attr("href");
45
46 $(this).parent().addClass("tab-in");
47 $(".tab-default:eq("+_index+")").removeClass("tab-in");
48
49 $(_divShow).removeClass("tabs-hide");
50 $("#tab-"+_index).addClass("tabs-hide");
51
52
53 _index = _divShow.substr(5);
54 })
55 </script>
56 </body>
57 </html>
58
