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

带CSS3过渡动画效果的jQuery Tabs选项卡插件

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

简介

##### 使用方法
使用该Tabs选项卡插件需要在页面中引入jQuery、jQueryTab.css、animation.css和jQueryTab.js文件。

```html
<link rel="stylesheet" href="jQueryTab.css" type="text/css" media="screen" />
<link rel="stylesheet" href="animation.css" type="text/css" media="screen" />
<script src="js/jquery.min.js"></script>
<script src="js/jQueryTab.js"></script>  
```                
#####  HTML结构
Tabs选项卡的基本HTML结构如下：

```html
<div class="tabs-1">
  <ul class="tabs">
      <li><a href="#tab1">General</a></li>
      <li><a href="#tab2">Social Media</a></li>
      <li><a href="#tab-copyright">Copyright</a></li>
      <li><a href="#tab4">Contact</a></li>
  </ul>
  <section class="tab_content_wrapper">
          <article class="tab_content" id="tab1">
              <p>General calidis mundum caligine coeperunt. </p>
          </article>
          <article class="tab_content" id="tab2">
              <p>Social Media conversa egens spectent tum sed diremit haec. </p>
          </article>
          <article class="tab_content" id="tab-copyright">
              <p>Copyright eurus supplex undae fulgura congestaque locis.</p>
          </article>
          <article class="tab_content" id="tab4">
              <p>Contact erat pugnabant diffundi pondere temperiemque. </p>
          </article>
  </section>
</div>        
```    
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过jQueryTab()方法来初始化该选项卡插件。

```html
$('.tabs-1').jQueryTab(); 
```
#####  配置参数

|  参数 |  默认值 | 描述  |
| ------------ | ------------ | ------------ |
|tabClass|'tabs'|选项卡的class类|
|accordionClass|'accordion_tabs'|小屏幕设备中手风琴头部的class类|
|contentWrapperClass|'tab_content_wrapper'|包裹内容的class类|
|contentClass|'tab_content'|容器的class类|
|activeClass|'active'|当前激活tab的class类|
|responsive|true|是否允许在小屏幕设备中转换为手风琴效果|
|responsiveBelow|600|设置响应式断点|
|collapsible|true|是否在小屏幕中折叠手风琴|
|useCookie|true|是否使用Cookie来记住最后一个激活的Tab|
|openOnhover|false|是否在鼠标滑过时切换Tab|
|initialTab|1|初始化时打开的Tab，第一个Tab是1不是0|
|cookieName|'active-tab'|记住最后一个激活的Tab的Cookie名称|
|cookieExpires|365|Cookie过期时间|
|cookiePath|''|访问cookie的路径|
|cookieDomain|''|cookie所在的域|
|cookieSecure|false|是否启用Cookie的安全机制（需要Https协议）|
|tabInTransition|'fadeIn'|显示Tabs中内容的class名称|
|tabOutTransition|'fadeOut'|隐藏Tabs中内容的class名称|
|accordionTransition|'slide'|手风琴的过渡效果：normal 或 slide|
|accordionIntime|500|进入动画的时间，单位毫秒|
|accordionOutTime|400|离开动画的时间，单位毫秒|
|before|function(){}|tab打开之前的回调函数|
|after|function(){}|tab关闭之后的回调函数|

#####  创建Class动画类
创建Tab的进入动画过渡类：

```html
.swingRightIn {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    opacity: 1;
    transition-delay: .3s;
}        
```          
##### 创建Tab的离开动画过渡类：

```html
.swingRightOut {
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
}     
```             
##### 然后可以在初始化该选项卡插件时传入这些class类。

```html
$('.tabs-1').jQueryTab({
    tabInTransition: 'swingRightIn',
    tabOutTransition: 'swingRightOut',
    cookieName: 'active-tab-1'
});                  
```

web299.com

带CSS3过渡动画效果的jQuery Tabs选项卡插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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