标签页切换通过data属性关联按钮与内容，用CSS的active类控制显隐，JavaScript动态切换类实现交互。
标签页切换是前端开发中常见的交互功能，通过点击不同的标签按钮，显示对应的内容区域。在CSS初级项目中，使用 display 属性控制内容显隐，结合 JavaScript 动态添加 active 类来标识当前选中项，是一种简单有效的方法。
1. 结构设计：HTML 布局
一个典型的标签页包含两部分：标签按钮组和内容面板组。每个按钮对应一个内容块。
<div class="tab-container">
<ul class="tab-header">
<li class="tab-btn active" data-tab="tab1">首页</li>
<li class="tab-btn" data-tab="tab2">关于</li>
<li class="tab-btn" data-tab="tab3">联系</li>
</ul>
<p><div class="tab-content">
<div id="tab1" class="tab-pane active">这里是首页内容</div>
<div id="tab2" class="tab-pane">这里是关于内容</div>
<div id="tab3" class="tab-pane">这里是联系内容</div>
</div>
</div>
说明：
- data-tab 属性用于关联按钮与内容块的 ID。
- active 类表示当前激活状态。
2. 样式控制：CSS 显示与高亮
使用 CSS 控制默认样式和显隐效果。关键是将未激活的面板隐藏。
立即学习“前端免费学习笔记（深入）”；
.tab-header {
list-style: none;
padding: 0;
display: flex;
}
<p>.tab-btn {
padding: 10px 15px;
cursor: pointer;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin-right: -1px;
}</p><p>.tab-btn.active {
background-color: #fff;
border-bottom: 2px solid #007acc;
font-weight: bold;
}</p><p>.tab-pane {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-top: none;
}</p><p>.tab-pane.active {
display: block;
}
关键点：
- 默认设置 .tab-pane { display: none; } 隐藏所有内容。
- 只有拥有 active 类的面板才会显示（display: block;）。
3. 交互实现：JavaScript 切换逻辑
通过事件委托监听标签点击，移除旧的 active 类，为当前按钮和对应面板添加 active 类。
document.querySelector('.tab-header').addEventListener('click', function(e) {
if (!e.target.classList.contains('tab-btn')) return;
<p>const tabs = document.querySelectorAll('.tab-btn');
const panes = document.querySelectorAll('.tab-pane');</p><p>// 清除所有 active 状态
tabs.forEach(btn => btn.classList.remove('active'));
panes.forEach(pane => pane.classList.remove('active'));</p><p>// 添加当前 active 状态
e.target.classList.add('active');
const tabId = e.target.dataset.tab;
document.getElementById(tabId).classList.add('active');
});
运行流程：
- 点击按钮时获取其 data-tab 值。
- 移除其他按钮和面板的 active 类。
- 给当前按钮和对应内容添加 active 类，触发 CSS 显示变化。
4. 小结：核心要点
- HTML 使用
data-属性建立按钮与内容的映射关系 - CSS 用
.active类控制高亮和 display: block/none 控制显隐 - JavaScript 负责动态切换类名，实现交互响应
这种模式结构清晰、易于理解，适合初学者掌握 DOM 操作与类控制的基本思路。基本上就这些，不复杂但容易忽略细节。
