支持响应式的Tabs选项卡jQuery插件

前端

responsive.tabs.js 是一款轻量级的响应式 Tab 选项卡/手风琴jQuery插件，默认自动支持响应式的水平Tab选项卡。主要原理是使用CSS3的@media，当访问设备的屏幕宽度小于768px时，会自动的把Tab选项卡形式换成Accordion手风琴形式。

具体效果如下：

响应式Tab选项卡/手风琴jQuery插件

特性：

  • Tab 自动生成支持相应的HTML结构
  • 支持切换按钮与内容水平并排的Tab
  • 支持Accordion、Toggle切换效果
  • 支持多浏览器（Chrome、Firefox、IE6+等。如果使用响应式，需支持CSS3 @media）
  • 支持多设备（网络、平板、移动等）


引用文件：

1、CSS 

1
<link rel="stylesheet" type="text/css" href="css/responsive.tabs.css" />

2、JS

1
2
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/responsive.tabs.js"></script>

3、HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="tabs">
    <ul class="tabs-list">
        <li class="active"><a href="javascript:;">……</a></li>
        <li><a href="javascript:;">……</a></li>
    </ul>
    <div class="tabs-container">
      <div class="tab-content" style="display:block;">
        ……
      </div>
      <div class="tab-content">
        ……
      </div>
    </div>
</div>

3、JS 调用

1
$('.tabs').respTabs();


参数

选项 类型 默认值 说明
startIndex number 0 默认显示第几个，从0开始
activeClass string active 当前高亮的标识clss
model string tabs 插件模式：tabs 或 accordions
responsive bool true 开启响应式，只在tabs模式有效
responsiveClass string responsive-tabs 触发事件的类型，click 或 mouseover
fnEvent string click 触发事件的类型，click 或 mouseover
toggles bool false 隐藏自身的切换，只在accordions模式有效
hidenContent bool false 默认隐藏Accordions内容，只在accordions模式有效


项目下载： responsive.tabs.js