Tab选项卡
简单响应式jQuery Tabs选项卡插件
PetitQ
这是一款简单实用的响应式 jQuery Tabs 选项卡插件。该选项卡插件会根据容器的大小弹性伸缩，它实用简单，选项卡的样式可以实用 CSS 来自定义。
使用方法：
在页面中引入 jquery 和 jquery-tab.js 文件。
也想出现在这里？联系我们吧
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/jquery-tab.js"></script>
HTML 结构：
该 Tabs 选项卡的基本 HTML 结构如下：
<div class="container">
<div class="tab-group">
<section id="tab1" title="Long Tab Name">
<h3>
Content 1</h3>
<p>
......</p>
</section>
......</div>
</div>
CSS 样式：
为该 Tabs 选项卡添加下面的基本 CSS 样式：
.tab-group {
position: relative;
border: 1px solid #eee;
margin-top: 2.5em;
border-radius: 0 0 10px 10px;
}.tab-group section {
opacity: 0;
height: 0;
padding: 0 1em;
overflow: hidden;
transition: opacity 0.4s ease, height 0.4s ease;
}.tab-group section.active {
opacity: 1;
height: auto;
overflow: visible;
}.tab-nav {
list-style: none;
margin: -2.5em -1px 0 0;
padding: 0;
height: 2.5em;
overflow: hidden;
}.tab-nav li {
display: inline;
}.tab-nav li a {
top: 1px;
position: relative;
display: block;
float: left;
border-radius: 10px 10px 0 0;
background: #eee;
line-height: 2em;
padding: 0 1em;
text-decoration: none;
color: grey;
margin-top: .5em;
margin-right: 1px;
transition: background .2s ease, line-height .2s ease, margin .2s ease;
}.tab-nav li.active a {
background: #6EB590;
color: white;
line-height: 2.5em;
margin-top: 0;
}
初始化插件：
在页面 DOM 元素加载完毕之后，可以通过 tabify()方法来初始化该 jquery 选项卡插件。
$(function(){
// Calling the plugin$('.tab-group').tabify();
})
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
