简介

semantictabs是一款用户制作Tabs菜单的JQuery插件。

（下载的附件中带DEMO）

使用

1.  引入 jquery.js 和 jquery.semantictabs.js 文件

2.  HTML

<div id="mytabset">
      <div class="panel">
        <h3>Tab1</h3>
         Panel stuff 1
      </div>
      <div class="panel">
        <h3>Tab2</h3>
         Panel stuff 2
      </div>
      <div class="panel">
        <h3>Tab3</h3>
         Panel stuff 3
      </div>
    </div>
<style type="text/css" media="screen">
      /*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 5em;
        text-decoration:none;
        font-weight:bold;
        background-color:#e6eeee;
      }
      ul.semtabs li.active a {
        background-color: #4c77b3;
        color: #fff;
      }
      /*end semantic tabs*/
    </style>

3. 调用

<script type="text/javascript" charset="utf-8">
      $(document).ready(function(){
        
        $("#mytabset").semantictabs({
          panel:'.panel',                //-- Selector of individual panel body
          head:'h3',                    //-- Selector of element containing panel head
          active:':first'               //-- Selector of panel to activate by default
        });
        
        $('#mash').click(function(){
          $("#mytabset").semantictabs({activate:1});
        });
        
      });
    </script>

相关链接

GitHub 地址 ：https://github.com/christianyates/jQuery-SemanticTabs