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