纯 CSS 实现标签切换必须用 :checked + radio，因 :hover 和 :active 无法保持状态；:focus-within 和 :has() 兼容性差不可靠；JS 方案应仅切换 class 以最小侵入。
用 :hover 和 :active 做标签切换效果不现实
直接靠 :hover 和 :active 无法实现「点击后保持选中状态」的标签切换——因为这两个伪类都是临时触发的：:hover 鼠标移入时生效、移出即失效；:active 只在鼠标按下瞬间存在，松开就消失。它们都不具备“记忆状态”的能力。
真正可用的 CSS 方案是 :checked + <input type="radio">
想纯 CSS 实现可切换、可保持的标签效果，必须借助表单控件的状态。最稳定的做法是用隐藏的 <input type="radio"> 配合 :checked 伪类，再用相邻兄弟选择器（~ 或 +）控制对应内容显隐。
- 所有
<input>必须有相同name属性，确保单选互斥 - 每个
<label>的for属性需指向对应id，或包裹<input>实现点击穿透 - 被选中的
<input>后面的内容区域，用input:checked ~ .panel这类选择器控制显示
<div class="tabs">
<input type="radio" name="tab" id="tab1" checked>
<label for="tab1">首页</label>
<input type="radio" name="tab" id="tab2">
<label for="tab2">关于</label>
<div class="panels">
<div class="panel">这里是首页内容</div>
<div class="panel">这里是关于内容</div>
</div>
</div>
CSS 中用 input#tab1:checked ~ .panels .panel:nth-child(1) 控制显示，其余类推。
:focus-within 和 :has() 尚未普适，别依赖
虽然现代 CSS 提供了 :focus-within（配合 tabindex）和实验性 :has(input:checked)，但：
立即学习“前端免费学习笔记（深入）”；
-
:focus-within依赖键盘焦点，对鼠标用户不友好，且失去焦点后状态丢失 -
:has()在 Safari 15.4+ 和 Chrome 105+ 才支持，Firefox 仍需手动开启实验功能，线上项目基本不可用 - 两者都无法替代
:checked的语义明确性和兼容性（IE9+ 支持）
如果非要用 JS，最小侵入写法是切换 class
真要放弃纯 CSS，最轻量的做法是只用 JS 切换一个 .active 类，其他全由 CSS 控制：
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.tab-btn, .tab-panel').forEach(el => {
el.classList.remove('active');
});
btn.classList.add('active');
const target = document.querySelector(btn.dataset.target);
if (target) target.classList.add('active');
});
});
对应 CSS 只需写 .tab-btn.active 和 .tab-panel.active 样式即可。这样 JS 不参与样式计算，维护成本低，也方便后续加动画。
容易被忽略的是：radio 方案里，若默认没设 checked，首次加载时所有面板都可能隐藏——务必检查初始状态是否显式声明。
