跨浏览器Tabs选项卡jQuery插件

PetitQ Tab选项卡 2018-10-24 1.62K 0 0

Easy-Responsive-Tabs-to-Accordion 是一款跨浏览器响应式 Tabs 选项卡 jQuery 插件。该选项卡支持水平和垂直两种选项卡模式，它可以在多种平台浏览器中工作：桌面电脑，平板和手机。它的特点还有：

支持水平和垂直的 Tabs 选项卡

也想出现在这里？联系我们吧

完全通过 jQuery 来创建 Tabs 转换效果

在同一个页面支持多个选项卡实例

跨浏览器：IE7+, Chrome, Firefox, Safari 和 Opera

支持多种设备：桌面电脑，平板和手机

可嵌套选项卡

可以通过浏览器地址栏 URL 直接链接到某一个 TAB

如果浏览器支持 History API，可以保存选项卡的状态

使用方法：

使用该幻灯片插件需要引入 jQuery（1.5.1+），responsive-tabs.css 和 easyResponsiveTabs.js 文件。

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

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/easyResponsiveTabs.js"></script>

HTML 结构：

非嵌套选项卡的 HTML 结构如下：

```
<div id="demoTab">          
```
```
    <ul class="resp-tabs-list">
```
```
        <li> .... </li>
```
```
        <li> .... </li>
```
```
        <li> .... </li>
```
```
    </ul> 
```
```
 
```

    <div class="resp-tabs-container">

```
        <div> ....... </div>
```
```
        <div> ....... </div>
```
```
        <div> ....... </div>
```
```
    </div>
```
```
</div>
```

嵌套选项卡的 HTML 结构如下：

```
<div id="ParentTab">          
```

    <ul class="resp-tabs-list tab_identifier_parent">

```
        <li> .... </li>
```
```
        <li> .... </li>
```
```
        <li> .... </li>
```
```
    </ul> 
```
```
 
```

    <div class="resp-tabs-container tab_identifier_parent">

```
        <div>
```
```
           <p> 
```

              <div id="ChildTab">

                <ul class="resp-tabs-list tab_identifier_child">

```
                   <li> .... </li>
```
```
                   <li> .... </li>
```
```
                   <li> .... </li>
```
```
                </ul> 
```
```
 
```

                <div class="resp-tabs-container tab_identifier_child">

```
                   <div> ....... </div>
```
```
                   <div> ....... </div>
```
```
                   <div> ....... </div>
```
```
                </div>
```
```
              </div>    
```
```
           </p>
```
```
        </div>
```
```
        <div> ....... </div>
```
```
        <div> ....... </div>
```
```
    </div>
```
```
</div>
```

初始化插件：

在页面 DOM 元素加载完毕之后，可以通过下面的方法来初始化该 Tabs 选项卡插件。

```
$('#demoTab').easyResponsiveTabs();
```

配置参数：

下面是该 Tabs 选项卡的一些可用配置参数：

type：选项卡的类型。可用的类型有：default, vertical, accordion。默认值：default

width：选项卡的宽度。默认值：'auto'

fit：是否 100%适配容器。默认值：true

closed：在开始时关闭所有面板。默认值：false

activate：切换 Tab 时的回调函数

tabidentify：Tab 组的名称标识符，必须是唯一的。默认值：'tab_identifier_child'

activetab_bg：在某一组中激活的选项卡的背景色。默认值：'#B5AC5F'

inactive_bg：在某一组中闲置的选项卡的背景色。默认值：'#E0D78C'

active_border_color：在某一组中激活的选项卡头部边框的颜色。默认值：'#9C905C'

active_content_border_color：在某一组中激活的选项卡内容区域边框的颜色。默认值：'#9C905C'

跨浏览器 Tabs 选项卡 jQuery 插件

已有 404 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

Tab选项卡

跨浏览器Tabs选项卡jQuery插件

使用方法：

HTML 结构：

初始化插件：

配置参数：

跨浏览器 Tabs 选项卡 jQuery 插件

相关文章

仿京东商城商品切换选项卡

纯CSS3超酷tab选项卡效果

jQuery + CSS3堆叠式Tab选项卡

发表回复取消回复

热销模板

Tab选项卡

使用方法：

HTML 结构：

初始化插件：

配置参数：

跨浏览器 Tabs 选项卡 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复