建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

制作Tabs菜单的JQuery插件semantictabs

来源:易助科技网浏览量:17收藏

简介


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

(下载的附件中带DEMO)


制作Tabs菜单的JQuery插件semantictabs-示例图



使用


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