css滑动标签页

CSS滑动标签页为网页设计师提供了一种实现动态效果的方法。标签页可以帮助网页用户更清晰地了解网页信息，又不影响整体页面布局。下面介绍一下如何使用CSS实现滑动标签页。

HTML结构如下：
<div class="tab-container">
<ul class="tab-nav">
<li class="active">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="tab-content">
<div class="tab-panel active">内容1</div>
<div class="tab-panel">内容2</div>
<div class="tab-panel">内容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);

以上代码实现了一个基础的CSS滑动标签页效果。HTML结构中的tab-container包含了ul和div两个子元素，ul中是标签导航，div中是标签内容。CSS样式中设置了标签样式和面板样式，并通过position定位实现了内容滑动的效果。JavaScript代码中的activateTab函数用于激活当前标签页和面板。

查看更多关于css滑动标签页的详细内容...