JavaScript移动端tab选项卡效果

分享一段代码实例，它实现了移动端tab选项卡效果。

更多移动端选项卡效果可以查阅移动端特效专区选项卡分类。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<style>
* {
  margin: 0;
  padding: 0;
}
div, input, textarea, button, a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
ul, li, ol {
  list-style: none;
}
a {
  color: #323232;
  outline-style: none;
  text-decoration: none;
}
.border-b {
  position: relative;
}
.border-b:after {
  top: auto;
  bottom: 0;
}
.border-t:before, .border-b:after {
  content: '';
  position: absolute;
  left: 0;
  background: #ddd;
  right: 0;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.nav {
  background-color: #fff;
  text-align: center;
}
.nav .tab {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.tab a {
  float: left;
  width: 49%;
  height: 2.56rem;
  line-height: 2.56rem;
  display: inline-block;
  border-right: 1px solid #e1e1e1;
}
.tab a:last-child {
  border-right: 0;
}
.tab .curr {
  border-bottom: 2px solid #fc7831;
  color: #fc7831;
}
.content ul li {
  display: none;
  padding: 3%;
  width: 94%;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function() {
  $(".tab a").click(function() {
    $(this).addClass('curr').siblings().removeClass('curr');
    var index = $(this).index();
    number = index;
    $('.nav .content li').hide();
    $('.nav .content li:eq(' + index + ')').show();
  });
})
</script>
</head>
<body>
  <div class="nav">
    <div class="tab border-b">
      <a href="javascript:;" class="curr">商品介绍</a>
      <a href="javascript:;">评价(99)</a>
    </div>
    <div class="content">
      <ul>
        <li style="display: block">商品介绍</li>
        <li>评价</li>
      </ul>
    </div>
  </div>
</body>
</html>

代码描述：JavaScript移动端 tab选项卡效果。JavaScript移动端tab选项卡效果

下载全部收藏

255 340

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册