标签页切换通过data属性关联按钮与内容，用CSS的active类控制显隐，JavaScript动态切换类实现交互。
标签页切换是前端开发中常见的交互功能，通过点击不同的标签按钮，显示对应的内容区域。在CSS初级项目中，使用 display 属性控制内容显隐，结合 JavaScript 动态添加 active 类来标识当前选中项，是一种简单有效的方法。
1. 结构设计：HTML 布局
一个典型的标签页包含两部分：标签按钮组和内容面板组。每个按钮对应一个内容块。
- 首页
- 关于
- 联系
这里是首页内容这里是关于内容这里是联系内容
说明：
- data-tab 属性用于关联按钮与内容块的 ID。
- active 类表示当前激活状态。
2. 样式控制：CSS 显示与高亮
使用 CSS 控制默认样式和显隐效果。关键是将未激活的面板隐藏。
立即学习“前端免费学习笔记（深入）”；
.tab-header {
list-style: none;
padding: 0;
display: flex;
}
.tab-btn {
padding: 10px 15px;
cursor: pointer;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin-right: -1px;
}
.tab-btn.active {
background-color: #fff;
border-bottom: 2px solid #007acc;
font-weight: bold;
}
.tab-pane {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-top: none;
}
.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;
const tabs = document.querySelectorAll('.tab-btn');
const panes = document.querySelectorAll('.tab-pane');
// 清除所有 active 状态
tabs.forEach(btn => btn.classList.remove('active'));
panes.forEach(pane => pane.classList.remove('active'));
// 添加当前 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 操作与类控制的基本思路。基本上就这些，不复杂但容易忽略细节。
