看了下 FrozenUI(QQ)、Jquery WeUI(微信)、SUI Mobile(淘宝)的tab实现方式，自己整理了一下。 1、FrozenUI
<div class="wrap"> <ul class="tab border-b"> <li class="tab-item current"> <span>热门</span> </li> <li class="tab-item"> <span>热门</span> </li> </ul> </div> <style> *{ margin: 0; padding: 0; } body{ background: #f2f2f2; } li{ list-style: none; } .wrap{ width: 100%; } .tab{ width: 100%; position: absolute; top: 0; left: 0; background: #fff; display: flex; justify-content: center; } .tab .tab-item{ /*width: 100%;*/ width: 109px; display: inline-block; text-align: center; font-size: 15px; } .tab .tab-item span{ height: 44px; line-height: 44px; position: relative; display: inline-block; padding: 0 10px; /*border-bottom: 4px solid #00a5e0;*/ } .tab .tab-item span:after{ content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 4px; } .tab .tab-item.current span{ color: #00a5e0; } .tab .tab-item.current span:after{ background: #00a5e0; } .border-b{ position: relative; } .border-b:after{ content: ''; position: absolute; left: 0; bottom: 0; display: block; width: 100%; border-bottom: 1px solid #ccc; transform-origin: 0 100%; transform: scaleY(0.5); } </style> <script> var $tabItem = $('.tab-item'); $tabItem.on('click', function () { var $this = $(this); $this.addClass('current').siblings().removeClass('current'); }) </script>2、JQuery WeUI
<ul class="navbar"> <li class="navbar-item">选项一</li> <li class="navbar-item">选项二</li> <li class="navbar-item">选项三</li> </ul> <style> *{ margin: 0; padding: 0; } ul, li{ list-style: none; } .navbar{ width: 100%; position: absolute; top: 0; left: 0; background: #fafafa; display: flex; } .navbar .navbar-item{ flex: 1; text-align: center; padding: 13px 0; color: #888; position: relative; } .navbar-item:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; transform-origin: 100% 0; transform: scaleX(0.5); border-right: 1px solid #ccc; color: #ccc; } .navbar-item:last-child:after{ display: none; } .navbar:after{ content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1px solid #ccc; transform-origin: 0 100%; transform: scaleY(0.5); color: #ccc; } .navbar-item:active{ background: #ededed; } </style>3、SUI Mobile（1）
<header class="bar"> <h1 class="title">标签页</h1> </header> <div class="content"> <div class="buttons-tab"> <a href="#" class="tab-link button active">全部</a> <a href="#" class="tab-link button">待付款</a> <a href="#" class="tab-link button">待发货</a> </div> </div> <style> *{ margin: 0; padding: 0; } a{ text-decoration: none; color: #333; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: 0; cursor: pointer; } body{ width: 100%; background: #eee; } .bar{ width: 100%; height: 3.2rem; background: aliceblue; position: relative; border: 1px solid transparent; box-sizing:border-box; } .title{ font-size: .85rem; color: #3d4145; text-align: center; font-weight: 500; line-height: 3.2rem; } .content{ width: 100%; height: auto; } .buttons-tab{ width: 100%; background: #fff; display: flex; } .buttons-tab .button{ width: 100%; height: 3rem; line-height: 3rem; text-align: center; border-bottom: 2px solid transparent; } .buttons-tab .button.active{ color: #0894ec; border-color: #0894ec; } </style> <script> var $tabLink = $('.tab-link'); $tabLink.on('click', function () { var $this = $(this); $this.addClass('active').siblings().removeClass('active'); }) </script>4、SUI Mobile（2）
<header class="bar"> <h1 class="title">标签页</h1> </header> <div class="content"> <div class="buttons-tab"> <a href="#" class="tab-link button active"> <span class="tab-txt">全部</span> </a> <a href="#" class="tab-link button"> <span class="tab-txt">待付款</span> </a> <a href="#" class="tab-link button"> <span class="tab-txt">待发货</span> </a> </div> </div> <style> *{ margin: 0; padding: 0; } a{ text-decoration: none; color: #333; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: 0; cursor: pointer; } body{ width: 100%; background: #eee; } .bar{ width: 100%; height: 3.2rem; background: aliceblue; position: relative; border: 1px solid transparent; box-sizing:border-box; } .title{ font-size: .85rem; color: #3d4145; text-align: center; font-weight: 500; line-height: 3.2rem; } .content{ width: 100%; height: auto; } .buttons-tab{ width: 100%; background: #fff; display: flex; } .buttons-tab .button{ width: 100%; text-align: center; } .buttons-tab .button .tab-txt{ display: inline-block; height: 3rem; line-height: 3rem; border-bottom: 2px solid transparent; } .buttons-tab .button.active .tab-txt{ color: #0894ec; border-color: #0894ec; } </style> <script> var $tabLink = $('.tab-link'); $tabLink.on('click', function () { var $this = $(this); $this.addClass('active').siblings().removeClass('active'); }) </script>