Tab选项卡
响应式 jQuery 选项卡插件
PetitQ
multipurpose_tabcontent 是一款多用途响应式的 jQuery Tabs 选项卡插件。该选项卡在到达指定的 CSS 断点时会转换为垂直手风琴列表。它还可以制作 Tab 在右侧的选项卡。
使用方法：
在页面中引入选项卡所需的样式文件 style.css，jquery 和 jquery.multipurpose_tabcontent.js 文件。
也想出现在这里？联系我们吧
<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 结构如下：
<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 选项卡。
$(".demo").champ();
配置参数：
如果需要制作响应式的垂直手风琴列表，可以通过 plugin_type 配置参数来设置。
$(".demo").champ({
plugin_type : "accordion"
});
可以通过 side 参数来设置 Tab 导航按钮在左侧还是右侧。
$(".accordion_example").champ({
side : "left", // 或 right
});
可以通过 active_tab 参数来设置选项卡起始的 Tab。
$(".demo").champ({
active_tab : "3"
});
controllers 参数用于控制选项卡是否可用。
$(".demo").champ({
controllers:"false"
});
通过 AJAX 请求来加载选项卡内容：
$(".demo").champ({
ajax:"true",
show_ajax_content_in_tab:"2",
content_path:"ajax.html"
});
multipurpose_tabcontent 选项卡插件的 github 地址为：https://github.com/bhaveshcmedhekar/multipurpose_tabcontent
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
