第1款插件:Semantic Tabs可以简单地制作Tabs菜单

Semantic Tabs可以简单地制作Tabs菜单 官方链接： http://plugins.jquery.com/semantictabs JS下载： http://ijquery.360sites.cn/js/jquery.semantictabs.js 如图： 引用代码: <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery.semantictabs.js"></script> 复制代码 HTML代码： <div id="mytabset">     <div class="panel">         <h3>标签1</h3>         面板1     </div>     <div class="panel">         <h3>标签2</h3>         面板2     </div>     <div class="panel">         <h3>标签3</h3>         面板3     </div> </div> 复制代码 JQuery代码： <script>     $(function () {         $('#mytabset').semantictabs({             panel:'panel',    //-- Selector of individual panel body             head:'h3',            //-- Selector of element containing panel header             active:':first'    //-- Which panel to activate by default         });     }); </script> 复制代码 CSS代码： #mytabset {         width: 100%; } .panel {         border: 1px solid #ccc; } /*semantic tabs*/ ul.semtabs {         margin: 0 auto;         clear: both;         border-bottom: 4px solid #4c77b3;         height: 25px;         list-style: none !important; } ul.semtabs li {         float: left;         height: 30px;         display: block;         margin: 0 !important;         background-image: none; } ul.semtabs li a { /*  height:15px;*/         line-height: 15px;         display:block;         padding: 5px 3em;         text-decoration: none;         font-weight: bold;         background-color: #e6eeee; } ul.semtabs li.active a {         background-color: #4c77b3;         color: #fff; } /*end semantic tabs*/ 复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=1