話不多說(shuō)熟菲，依舊先上圖
image
image.gif
?
代碼量不大，有輕微動(dòng)畫(huà)效果蚪燕，不支持左右滑動(dòng)窜骄，切換流暢锦募，具體代碼如下：
- HTML：
<div class="nav-box">
<div class="nav-tap">
<a class="nav-tap-item" onclick="tabChange(0)">派單中</a>
<a class="nav-tap-item nav-tap-item-on" onclick="tabChange(1)">服務(wù)中</a>
<a class="nav-tap-item" onclick="tabChange(2)">已完成</a>
</div>
<div class="nav-body">
<div id="tap1" class="nav-body-item" hidden>
/* 第一個(gè)頁(yè)面內(nèi)容 */
</div>
<div id="tap2" class="nav-body-item">
/* 第二個(gè)頁(yè)面內(nèi)容 */
</div>
<div id="tap3" class="nav-body-item" hidden>
/* 第三個(gè)頁(yè)面內(nèi)容 */
</div>
</div>
</div>
image.gif
默認(rèn)顯示中間那頁(yè)，由hidden控制隱藏邻遏，三個(gè)導(dǎo)航欄都設(shè)置click事件糠亩，調(diào)用js文件里的函數(shù)，并傳入固定的參數(shù)准验。
- CSS：
.nav-box{
width: 100%;
height: 100%;
position: relative;
}
.nav-tap{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
position: absolute;
top: 0;
font-size: 1rem;
background-color: #fff;
padding: 0 4%;
box-sizing: border-box;
}
.nav-tap-item{
width: 100%;
display: block;
color:#9a9a9a;
font-size: 1rem;
padding: .8rem 0;
text-align: center;
transition: .3s;
}
.nav-tap-item-on{
font-size: 1.1rem;
color: #4a90e2;
position: relative;
}
.nav-tap-item-on:after{
content: '';
width: 80%;
height: 4px;
background-color: #4a90e2;
position: absolute;
bottom: 0;
left:10%;
}
.nav-body{
margin-top: 14%;
}
image.gif
動(dòng)畫(huà)效果由transition屬性控制赎线，我這里的字體單位是rem，詳細(xì)內(nèi)容請(qǐng)自行查詢移動(dòng)端的rem布局糊饱。
- JavaScript：
/**
* 控制點(diǎn)擊頂部導(dǎo)航欄變換
* @param tabNum
*/
function tabChange(tabNum){
$(".nav-tap-item").eq(tabNum).addClass('nav-tap-item-on').siblings('.nav-tap-item').removeClass('nav-tap-item-on');
$(".nav-body-item").eq(tabNum).show().siblings().hide();
}
image.gif
用的是jQuery庫(kù)垂寥，eq選取同一類名的元素，為其添加類名，變?yōu)楸贿x中的狀態(tài)滞项，siblings選取除當(dāng)前選中的元素外的其他同名元素狭归，并移除選中態(tài)的類名，下面用相同方法控制頁(yè)面的顯隱文判。
