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

多用途响应式的jQuery选项卡插件

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

多用途响应式的jQuery选项卡插件

简介

##### 使用方法
在页面中引入选项卡所需的样式文件style.css，jquery和jquery.multipurpose_tabcontent.js文件。

```html
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.multipurpose_tabcontent.js"></script>      
```            
#####  HTML结构
该选项卡所需的HTML结构如下：

```html
<div class="tab_wrapper demo">
 
  <ul class="tab_list">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
     
  </ul>
 
  <div class="content_wrapper">
    <div class="tab_content active">
      <h3>Tab content 1</h3>
    </div>
 
    <div class="tab_content">
      <h3>Tab content 2</h3>
    </div>
 
    <div class="tab_content">
      <h3>Tab content 3</h3>
    </div>
  </div>
 
</div>
```
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过champ()方法来生成一个基本的Tabs选项卡。

```html
$(".demo").champ();
```
#####  配置参数
如果需要制作响应式的垂直手风琴列表，可以通过plugin_type配置参数来设置。

```html
$(".demo").champ({
  plugin_type :  "accordion"
});
```
可以通过side参数来设置Tab导航按钮在左侧还是右侧。

```html
$(".accordion_example").champ({
  side : "left", // 或 right
});
```
可以通过active_tab参数来设置选项卡起始的Tab。

```html
$(".demo").champ({
  active_tab : "3"
});  
```                
controllers参数用于控制选项卡是否可用。

```html
$(".demo").champ({
  controllers:"false"
});
```
通过AJAX请求来加载选项卡内容：

```html
$(".demo").champ({
  ajax:"true",
  show_ajax_content_in_tab:"2",
  content_path:"ajax.html"
});
```

web299.com

多用途响应式的jQuery选项卡插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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