当前位置：首页 > 网页特效 > 选项卡

跨浏览器响应式Tabs选项卡jQuery插件

分类：选项卡日期：2024-05-14 点击(17) 评论(0)

简介

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

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

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

```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选项卡插件。

```html
$('#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'。

web299.com

跨浏览器响应式Tabs选项卡jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果