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

所属分类:媒体-Tabs

 32775  316  查看评论 (4)
分享到微信朋友圈
X
支持响应式的Tabs选项卡jQuery插件 ie兼容6

responsive.tabs.js

支持响应式的Tab选项卡,并支持Accordion、Toggle切换效果。

具体效果如下: 

引用文件

CSS

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

JS

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

HTML结构

<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>

插件调用

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

参数

选项类型默认值说明
startIndexnumber0默认显示第几个,从0开始
activeClassstring'active'当前高亮的标识clss
modelstring'tabs'插件模式:tabs 或 accordions
responsivebooltrue开启响应式,只在tabs模式有效
responsiveClassstring'responsive-tabs'触发事件的类型,click 或 mouseover
fnEventstring'click'触发事件的类型,click 或 mouseover
togglesboolfalse隐藏自身的切换,只在accordions模式有效
hidenContentboolfalse默认隐藏Accordions内容,只在accordions模式有效


兼容性

Chrome、Firefox、IE6+。(如果使用响应式,需支持CSS3 @media的浏览器)


相关插件-Tabs
  Tabs
 40478  317

js仿660网站宽屏图片选项卡切换代码

js仿660网站宽屏图片选项卡切换代码
  Tabs
 19578  258

淡入淡出效果的TAB标签

淡入淡出效果的TAB标签,兼容所有浏览器。
  Tabs
 33181  238

jQuery tab内容列表

网站常用jQuery tab选项卡切换加内容列表
  Tabs
 9663  159

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    大猫 0
    2018/12/18 16:28:02
    ?(?????)??、窃?? 0
    2018/4/26 8:41:19
    在这边浏览的时候好好儿的,能够支持手机,但是放到自己的服务器之后就不行了! 回复
    刘... 0
    2018/3/16 17:04:20
    怎么不支持手机 回复
    海迷 0
    2016/8/31 14:08:46
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复