跨浏览器Tabs选项卡jQuery插件

PetitQ Tab选项卡 2018-10-24 1.41K 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 插件

已有 352 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

Tab选项卡

跨浏览器Tabs选项卡jQuery插件

使用方法：

HTML 结构：

初始化插件：

配置参数：

跨浏览器 Tabs 选项卡 jQuery 插件

相关文章

Tab选项卡鼠标悬停黑白变彩色jQuery效果

易于使用jQuery Tabs选项卡插件

Tab在底部的tabs选项卡jQuery插件

发表回复取消回复

热销模板

Tab选项卡

使用方法：

HTML 结构：

初始化插件：

配置参数：

跨浏览器 Tabs 选项卡 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复