当前位置：首页 > 网页特效 > 选项卡

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

分类：选项卡日期：2024-05-14 点击(5) 评论(0)

简介

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

bower install pg-tab
npm install pg-tab               
#####  使用方法
在页面中引入jquery、pignose.tab.min.js和pignose.tab.min.css文件。

```javascript
<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结构如下：

```javascript
<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()方法来初始化该选项卡插件。

```javascript
$(function() {
  $('.tab').pignoseTab({
    animation: true,
    children: '.tab'
  });
});     
```             
#####  配置参数
该Tabs选项卡可用的配置参数有：

|  参数 | 名称  | 默认值  |描述|
| ------------ | ------------ | ------------ |
| callback| null| function| 当Tabs选项卡按钮被点击时触发的回调函数| 
| animation| static| static, true, false| 该选项用于开启和关闭动画，false相当于static| 
| children| string| .sub-tab| 如果使用子选项卡，你需要选择子选项卡的class名称| 
| animationTime| 300| 毫秒时间| 动画的时间| 
| animationEasing| easeInOutCubic| Easing的名称| 动画的 jQuery animation easing 名称|

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果