响应快速且易于使用的jQuery Tabs选项卡插件

pignose.tab.js是一款响应快速且易于使用的jQuery Tabs选项卡插件。该选项卡插件支持多种样式的选项卡：普通选项卡，带子选项的选项卡，扁平风格的选项卡，响应式选项卡和手机选项卡等。

安装

可以通过bower或npm来安装该选项卡插件。

bower install pg-tab
npm install pg-tab               
                

使用方法

在页面中引入jquery、pignose.tab.min.js和pignose.tab.min.css文件。

<link rel="stylesheet" href="dist/css/pignose.tab.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="dist/js/pignose.tab.min.js"></script>               
                

HTML结构

该选项卡的基本HTML结构如下：

<div class="tab">
  <ul>
    <li>
      <a href="#">TAB-1</a>
      <div>
        Hello i am normal tab!<br />
        This usage so easy and simple.
      </div>
    </li>
    <li>
      <a href="#">TAB-2</a>
      <div>
        Content2
      </div>
    </li>
    <li>
      <a href="#">TAB-3</a>
      <div>
        Content3
      </div>
    </li>
  </ul>
</div>                 
                

初始化插件

在页面DOM元素加载完毕之后，可以通过pignoseTab()方法来初始化该选项卡插件。

$(function() {
  $('.tab').pignoseTab({
    animation: true,
    children: '.tab'
  });
});                  
                

配置参数

该Tabs选项卡可用的配置参数有：

PIGNOSE-Tab选项卡插件的github地址为：https://github.com/KennethanCeyer/PIGNOSE-Tab