移动端几种tab切换及实现方式

看了下 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>