jQueryTab是一款带CSS3过渡动画效果的jQuery Tabs选项卡插件。它是轻量级插件，使用简单，采用响应式设计，并支持多种CSS3动画过渡效果。它的特点还有：

  • 响应式设计：在平板、手机等小屏幕设备中自动转换为手风琴样式。
  • 支持Cookie：插件会使用Cookie记住用户点击的最后一个Tab。
  • CSS3动画过渡：支持的动画过渡效果有：fade, slideUp, slideRight, flip, rotate, swingRight, scaleDown, scaleUp。你也可以定义动画。
  • 手风琴效果：在小屏幕设备中可对手风琴进行折叠。
  • 可在初始化时选择某个Tab来显示。
  • URL Hash：可以在URL地址中直接打开某个Tab。
  • 回调函数：提供before和after回调函数。
  • 事件：可以在点击和鼠标滑过事件之间切换。

使用方法

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

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

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

$('.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的进入动画过渡类：

.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的离开动画过渡类：

.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类。

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

jQueryTab选项卡插件的github地址为：https://github.com/dharmapoudel/jQueryTab