您的位置：首页 > Web前端 > JQuery

基于jQuery的响应式Tab选项卡插件easyResponsiveTabs.js

2016-01-09 09:07 1076 查看

描述：是一款轻量级的响应式 Tab 选项卡/手风琴jQuery插件，默认为水平/垂直Tab选项卡样式。

使用方法：

1）下载easyResponsiveTabs.js插件

2）引入js文件

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>fullPageDemo</title>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/easyResponsiveTabs.js"></script>

</head> 3）引入自定义CSS样式文件

4）HTML页面
<div class="sap_tabs">
<div id="horizontalTab"
style="display: block; width: 100%; margin: 0px;">
<ul class="resp-tabs-list">
<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"
style="font-size: 20px"><span>选项卡1</span></li>
<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"
style="font-size: 20px"><span>选项卡2</span></li>
<div class="clearfix"></div>
</ul>
<div class="resp-tabs-container">
<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
<div class="tab_img grid">
<div class="col-md-3 img-top ">
<a href="#" rel="title"
class="b-link-stripe b-animate-go thickbox" target="_blank">
<figure class="effect-apollo"> <img
src="images/photowall/g1.jpg" alt="" /> <figcaption>
</figcaption> </figure>
</a>
</div>
<div class="col-md-3 img-top ">
<a href="#" rel="title"
class="b-link-stripe b-animate-go thickbox" target="_blank">
<figure class="effect-apollo"> <img
src="images/photowall/g2.jpg" alt="" /> <figcaption>
</figcaption> </figure>
</a>
</div>
<div class="col-md-3 img-top ">
<a href="#" rel="title"
class="b-link-stripe b-animate-go thickbox" target="_blank">
<figure class="effect-apollo"> <img
src="images/photowall/g3.jpg" alt="" /> <figcaption>
</figcaption> </figure>
</a>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
<div class="tab_img grid">
<div class="col-md-3 img-top ">
<a href="#" rel="title"
class="b-link-stripe b-animate-go thickbox" target="_blank">
<figure class="effect-apollo"> <img
src="images/photowall/g9.jpg" alt="" /> <figcaption>
</figcaption> </figure>
</a>
</div>
<div class="col-md-3 img-top ">
<a href="#" rel="title"
class="b-link-stripe b-animate-go thickbox" target="_blank">
<figure class="effect-apollo"> <img
src="images/photowall/g10.jpg" alt="" /> <figcaption>
</figcaption> </figure>
</a>
</div>
<div class="col-md-3 img-top ">
<a href="#" rel="title"
class="b-link-stripe b-animate-go thickbox" target="_blank">
<figure class="effect-apollo"> <img
src="images/photowall/g11.jpg" alt="" /> <figcaption>
</figcaption> </figure>
</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>5）JavaScript脚本
<script type="text/javascript">
$(document).ready(function () {
$('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true // 100% fit in a container
});
});

</script>

6）运行代码即可

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 响应式 jquery插件 javascript

相关文章推荐

新的分享

章节导航