原生JS无依赖，CSS实现下拉标签页教程

本文深入剖析了纯CSS实现下拉菜单与标签页的底层原理与现实困境：虽能通过:hover、:checked和:focus-within等伪类达成无JS交互，但受限于DOM结构刚性、触屏设备失效、无障碍支持缺失、浏览器兼容性短板及选择器权重冲突等固有缺陷，最终揭示了一个关键事实——零JS方案并非技术捷径，而是以牺牲可用性、可访问性和维护弹性为代价的权衡；如果你追求真正健壮、跨端一致且符合WCAG标准的交互体验，适度引入原生JavaScript不仅是合理选择，更是必要之举。

纯CSS下拉菜单为什么hover失效

原生无JS环境里，:hover 是唯一可用的交互伪类，但它的触发有硬性限制：只对鼠标悬停有效，且不支持触屏设备的“点击展开”。更关键的是，如果下拉项（.dropdown-menu）和触发元素（.dropdown-toggle）之间存在 DOM 间隙（比如 margin、border 或父容器 overflow: hidden），:hover 状态会立刻中断，菜单闪退。

• 确保触发元素与下拉容器是连续嵌套关系，中间不能有非父子层级的空隙元素
• 给父容器加 overflow: visible，避免被裁剪导致 hover 中断
• 移动端完全不可用——:focus-within 可作为备选，但需配合 tabindex 和键盘操作，不是“点一下就开”

标签页（Tabs）如何用:checked + <input type="radio">实现

这是无 JS 标签页最可靠的方式：利用单选按钮的互斥性和 :checked 伪类联动显示对应面板。核心在于每个 <input> 必须有唯一 name，且通过 id/for 关联标签，再用相邻/子元素选择器控制内容显隐。

• <input type="radio" name="tabs" id="tab1"> 必须带 name，否则无法互斥
• 标签页标题用 ，不能用
  —— 那需要 JS
• 面板内容需紧跟对应 <input> 后（用 ~ 通用兄弟选择器）或包裹在同级容器内（用 :checked ~ .panel）
• 默认选中靠给第一个 <input> 加 checked 属性，别指望 CSS 自动选中

:focus-within 在表单类下拉中的适用边界

当触发场景必须支持键盘导航（比如搜索框下拉建议），:focus-within 比 :hover 更合理，但它依赖整个容器获得焦点——意味着容器得有 tabindex="0"，且内部可聚焦元素（如 <input> 或带 tabindex 的