CSS手機tab切換效果是網(wǎng)頁設(shè)計中常見的交互方式，在手機網(wǎng)頁中特別適用。今天我們來學習如何使用CSS實現(xiàn)一個手機tab切換效果。

/* HTML結(jié)構(gòu) */
<div class="tab">
<div class="tab-header">
<span class="active">tab1</span>
<span>tab2</span>
<span>tab3</span>
</div>
<div class="tab-content">
<div class="tab-item active">content1</div>
<div class="tab-item">content2</div>
<div class="tab-item">content3</div>
</div>
</div>
/* CSS樣式 */
.tab{
width: 100%;
overflow: hidden;
}
.tab-header{
display: flex;
justify-content: space-between;
}
.tab-header span{
flex: 1;
text-align: center;
padding: 10px;
border-bottom: 1px solid #ddd;
color: #333;
}
.tab-header span.active{
color: #f00;
}
.tab-content{
width: 300%;
display: flex;
transform: translateX(0);
transition: transform 0.5s ease-in-out;
}
.tab-item{
flex: 1;
padding: 20px;
}
.tab-item.active{
background-color: #fff;
}
/* JS腳本(點擊tab切換) */
let headerSpans = document.querySelectorAll('.tab-header span')
let contentItems = document.querySelectorAll('.tab-item')
for(let i=0;i<headerSpans.length;i++){
headerSpans[i].addEventListener('click',function(){
for(let j=0;j<headerSpans.length;j++){
headerSpans[j].classList.remove('active')
}
this.classList.add('active')
let distance = -i * 100
contentItems[0].style.transform = 'translateX(' + distance + '%)'
})
}

實現(xiàn)這個效果的關(guān)鍵在于CSS中使用了display:flex，使標簽水平排列，并使用了transform屬性來實現(xiàn)平移動畫。JS腳本監(jiān)聽了每一個tab的點擊事件，并根據(jù)當前點擊的tab的index計算出需要平移的距離，將其賦值給contentItems的transform屬性即可實現(xiàn)tab切換的效果。

以上就是CSS手機tab切換效果的實現(xiàn)，希望能幫助大家更好地完成手機網(wǎng)頁設(shè)計。