tab效果——支持tab标题的宽度自适应

最新推荐文章于 2023-06-03 22:09:38 发布

转载最新推荐文章于 2023-06-03 22:09:38 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/janey/archive/2010/06/01/web-k.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了一款基于jQuery的Tabs插件实现，该插件模仿了jQuery UI中Tabs的效果，但功能尚不完善，主要实现了基本的Tab切换功能。作者计划后续添加更多特性，如使当前Tab与其他Tab等高及在IE浏览器下实现圆角显示。

自己做的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

转载于:https://www.cnblogs.com/janey/archive/2010/06/01/web-k.html