当前位置:主页 > 网页特效 > TAB标签 >

简单响应式jQuery Tabs选项卡插件

发布时间:2018/07/10 来源:互联网 浏览: 关键词:响应式 jquery 选项卡 tab 
简单响应式jQuery Tabs选项卡插件 简单响应式jQuery Tabs选项卡插件
阿里云

简要教程

这是一款简单实用的响应式jQuery Tabs选项卡插件。该选项卡插件会根据容器的大小弹性伸缩,它实用简单,选项卡的样式可以实用CSS来自定义。

使用方法

在页面中引入jquery和jquery-tab.js文件。

<scripttype="text/javascript"src="js/jquery-min.js"></script>
<scripttype="text/javascript"src="js/jquery-tab.js"></script>         

HTML结构

该Tabs选项卡的基本HTML结构如下:

<divclass="container">
      <divclass="tab-group">
        <sectionid="tab1"title="Long Tab Name">
          <h3>
            Content 1
          </h3>
          <p>
            ......
          </p>
        </section>
        ......
      </div>
</div>      
CSS样式

为该Tabs选项卡添加下面的基本CSS样式:

.tab-group {
  position:relative;
  border:1pxsolid#eee;
  margin-top:2.5em;
  border-radius:0010px10px;
}
.tab-group section {
  opacity:0;
  height:0;
  padding:01em;
  overflow:hidden;
  transition: opacity0.4s ease, height0.4s ease;
}
.tab-group section.active {
  opacity:1;
  height:auto;
  overflow:visible;
}
 
.tab-nav {
  list-style:none;
  margin:-2.5em-1px00;
  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:10px10px00;
  background:#eee;
  line-height:2em;
  padding:01em;
  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();
})  

共有人阅读,期待你的评论!评论
Top