选中项颜色高亮，CSS类名动态切换方法

• 如果元素不是原生可聚焦的（比如
  ），要加 tabindex="0" 才能响应 :focus
• :active 无法维持，纯 CSS 没法靠它记住“哪个被点了”
• 移动端点击还可能触发短暂的 :active，但紧接着失焦，视觉上更难捕捉

用 :checked + 隐藏单选框实现无 JS 高亮

适合单选场景（如选项卡、表单单选组），利用表单控件的原生状态，完全不用 JS。

• 把 放在文字前，用 display: none 隐藏它
• 用相邻兄弟选择器 input:checked + label 或通用兄弟选择器匹配对应标签
• 确保 label 的 for 属性和 input 的 id 匹配，否则点击无效

input[type="radio"] { display: none; }
input:checked + label { color: #007bff; background: #f8f9fa; }

动态切换时 class 名拼错或作用域不对

常见错误不是逻辑写错，而是类名打字偏差或 CSS 优先级被覆盖。

• 检查 JS 里用的是 element.classList.add("active") 还是误写成 addClass("active")（后者会报错）
• CSS 中如果用了 .menu .item.active，但实际 DOM 结构是
  没包在 .menu 里，样式就不生效
• 第三方 UI 库（如 Bootstrap）可能自带 .active 样式，和你写的冲突，建议加命名空间，比如用 .my-list-item.active

真正麻烦的往往不是怎么写，而是类名散落在 JS、HTML、CSS 三处，改一处漏两处。上线前最好搜一遍整个项目里的 active，确认含义统一。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~