这是一款简单实用的响应式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(); })
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!