必须用 JavaScript 控制类名，因为 :active 仅瞬时触发、不持久，且不支持键盘操作；:target 依赖 URL 锚点，无法满足动态内容同步。
点击后高亮并切换内容，必须用 JavaScript 控制类名，纯 CSS 的 :active 或 :target 都无法同时满足「持久高亮 + 内容同步显示」两个需求。
为什么不能只靠 :active 实现点击高亮
:active 只在鼠标按下或手指按住的瞬间触发，松开就消失。它不是“选中态”，而是“正在按”的瞬时反馈。常见错误包括：
- 只写了
:hover，漏掉:active - 写了
:active但没加transition，导致颜色/缩放变化像闪烁，人眼难察觉 - 没设
cursor: pointer，用户无法判断元素是否可点（尤其移动端） - 期望它响应键盘 Enter/Space —— 实际不支持，无障碍能力弱
用 dataset 和 data-target 做安全切换
推荐结构：每个标签按钮带 data-target="xxx"，对应内容区有 id="xxx"。JS 只负责读取、查找、切类，不碰内联样式。
- 用
btn.dataset.target获取目标 ID，比getAttribute('data-target')更简洁且自动处理驼峰 - 先查
const targetEl = document.getElementById(targetId)，再判断是否为null，避免Cannot set property 'display' of null - 切换前统一移除所有
.tab-active和.content-active类，再单独添加到当前项 - 用 CSS 控制表现：
.content-active { opacity: 1; transition: opacity 0.2s; }，JS 不写style.display
表格里点击整列高亮的坑在哪
别碰 background-color 完全无效，只有 width、background（shorthand）、visibility: collapse 可用。
- 必须监听
th的click事件，用e.target.cellIndex拿真实列号（自动兼容colspan/rowspan） - 遍历所有
tr（含thead、tbody、tfoot），对每个tr.cells[i]操作，不能只扫tbody - CSS 必须分开写：
thead tr th:nth-child(2), tbody tr td:nth-child(2)，tr > td:nth-child(2)在跨列时会错位
最易被忽略的是：状态同步必须由 JS 主导，CSS 只负责视觉表达。任何想绕过 JS、靠伪类“自动记住点击”的方案，都会在多页跳转、键盘导航、动态加载等场景下失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
