答案是使用data-tab属性关联标签与内容，通过JavaScript切换active类，结合CSS的display属性控制显示隐藏，实现选项卡切换效果。
要使用CSS和JavaScript制作一个简易的选项卡切换效果，核心思路是通过控制内容区域的 display 属性（none 隐藏，block 显示），并结合为当前激活的标签添加 active 类来实现视觉反馈。下面是一个简单、实用的实现方法。
HTML 结构
定义选项卡标题和对应的内容区域：
<div class="tabs">
<ul class="tab-header">
<li class="active" data-tab="tab1">选项1</li>
<li data-tab="tab2">选项2</li>
<li data-tab="tab3">选项3</li>
</ul>
<div id="tab1" class="tab-content active">这是选项卡1的内容</div>
<div id="tab2" class="tab-content">这是选项卡2的内容</div>
<div id="tab3" class="tab-content">这是选项卡3的内容</div>
</div>
CSS 样式
设置基本样式，并用 display: none 隐藏非激活内容：
.tab-header {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.tab-header li {
padding: 10px 20px;
cursor: pointer;
border: 1px solid #ccc;
background: #f5f5f5;
margin-right: 5px;
}
.tab-header li.active {
background: #007cba;
color: white;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
margin-top: -1px;
}
.tab-content.active {
display: block;
}
JavaScript 控制切换
点击标签时移除所有 active 类，并为当前项和对应内容添加：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('.tab-header li').forEach(tab => {
tab.addEventListener('click', () => {
// 移除之前的 active 状态
document.querySelector('.tab-header li.active')?.classList.remove('active');
document.querySelector('.tab-content.active')?.classList.remove('active');
// 添加当前 active 状态
const tabId = tab.dataset.tab;
tab.classList.add('active');
document.getElementById(tabId).classList.add('active');
});
});
关键点说明
data-tab 属性：用于关联标题和内容，简洁清晰。
active 类控制显示：CSS 中通过 .tab-content.active { display: block; } 控制可见性。
JavaScript 只负责切换类名：不直接操作样式，保持结构与行为分离。
基本上就这些。这个方案轻量、易懂，适合在静态页面或小型项目中快速实现选项卡功能。
