标签页切换通过 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，显示出来
基本上就这些，不复杂但容易忽略细节。
