标签页切换通过CSS和JavaScript实现，点击选项卡时高亮当前按钮并显示对应内容。HTML结构包含.tab-item按钮和.tab-content面板，CSS设置.tab-content默认隐藏（display: none），仅.active项显示（display: block）。JavaScript为每个.tab-item绑定点击事件：移除所有active类，再为当前tab及关联内容添加active类，实现内容切换。关键点在于data-tab与id匹配，确保正确关联按钮与面板，控制显示隐藏。
标签页切换是前端开发中常见的交互效果。使用 CSS 配合 JavaScript，通过控制 display 属性和添加/移除 active 类，可以轻松实现内容切换。
HTML 结构
基本结构包含一个选项卡列表（tab 切换按钮）和多个内容面板：
<div class="tab-container"> <ul class="tabs"> <li class="tab-item active" data-tab="tab1">首页</li> <li class="tab-item" data-tab="tab2">关于</li> <li class="tab-item" data-tab="tab3">设置</li> </ul> <div id="tab1" class="tab-content active">这里是首页内容</div> <div id="tab2" class="tab-content">这里是关于内容</div> <div id="tab3" class="tab-content">这里是设置内容</div> </div>
CSS 样式控制显示隐藏
关键在于默认隐藏所有内容面板，仅显示标记为 active 的那个：
- .tab-content 设置
display: none - .tab-content.active 设置
display: block（或 flex、inline-block 等） - 通过类名切换来控制哪一块内容可见
JavaScript 实现切换逻辑
为每个 tab 按钮绑定点击事件，动态切换 active 类：
document.querySelectorAll('.tab-item').forEach(item => { item.addEventListener('click', function() { // 移除所有 active 类 document.querySelectorAll('.tab-item').forEach(i => i.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); // 给当前点击的 tab 和对应内容添加 active this.classList.add('active'); const tabId = this.getAttribute('data-tab'); document.getElementById(tabId).classList.add('active'); }); });
效果说明
点击不同 tab 时：
- 当前 tab 按钮高亮（通过 active 类样式）
- 其他内容面板 display: none，不可见
- 对应的内容块 display: block，显示出来
基本上就这些，不复杂但容易忽略细节。