CSS滑動(dòng)標(biāo)簽頁為網(wǎng)頁設(shè)計(jì)師提供了一種實(shí)現(xiàn)動(dòng)態(tài)效果的方法。標(biāo)簽頁可以幫助網(wǎng)頁用戶更清晰地了解網(wǎng)頁信息，又不影響整體頁面布局。下面介紹一下如何使用CSS實(shí)現(xiàn)滑動(dòng)標(biāo)簽頁。

HTML結(jié)構(gòu)如下：
<div class="tab-container">
<ul class="tab-nav">
<li class="active">標(biāo)簽1</li>
<li>標(biāo)簽2</li>
<li>標(biāo)簽3</li>
</ul>
<div class="tab-content">
<div class="tab-panel active">內(nèi)容1</div>
<div class="tab-panel">內(nèi)容2</div>
<div class="tab-panel">內(nèi)容3</div>
</div>
</div>
CSS樣式如下：
.tab-container {
position: relative;
}
.tab-nav {
display: flex;
}
.tab-nav li {
cursor: pointer;
margin-right: 10px;
padding: 10px;
border: 1px solid #ccc;
}
.tab-nav .active {
background-color: #ccc;
}
.tab-content {
position: relative;
}
.tab-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.tab-panel.active {
opacity: 1;
}
JavaScript代碼如下：
const tabs = document.querySelectorAll('.tab-nav li');
const panels = document.querySelectorAll('.tab-panel');
function activateTab(index) {
tabs.forEach(tab =>tab.classList.remove('active'));
panels.forEach(panel =>panel.classList.remove('active'));
tabs[index].classList.add('active');
panels[index].classList.add('active');
}
tabs.forEach((tab, index) =>{
tab.addEventListener('click', () =>{
activateTab(index);
});
});
activateTab(0);

以上代碼實(shí)現(xiàn)了一個(gè)基礎(chǔ)的CSS滑動(dòng)標(biāo)簽頁效果。HTML結(jié)構(gòu)中的tab-container包含了ul和div兩個(gè)子元素，ul中是標(biāo)簽導(dǎo)航，div中是標(biāo)簽內(nèi)容。CSS樣式中設(shè)置了標(biāo)簽樣式和面板樣式，并通過position定位實(shí)現(xiàn)了內(nèi)容滑動(dòng)的效果。JavaScript代碼中的activateTab函數(shù)用于激活當(dāng)前標(biāo)簽頁和面板。