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函数用于激活当前标签页和面板。