CSS Academy · 课时

使用 :checked 技巧实现选项卡与 JS 对比

Q: 「使用 :checked 技巧实现选项卡与 JS 对比」这节课中我会学到什么？

使用 CSS 的 :checked 技巧实现选项卡界面，并将其与 JavaScript 方法进行比较。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 CSS 的 :checked 技巧实现选项卡界面，并将其与 JavaScript 方法进行比较。

使用 :checked 技巧实现选项卡与 JS 对比 是 CoddyKit 上的免费 CSS Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

标签页组件要求

标签页组件需要具备：活动标签页的视觉指示器、在选择时显示或隐藏的关联面板、标签页之间的键盘导航，以及可访问的 ARIA 属性。这些功能可以使用纯 CSS 的 :checked 技巧实现，也可以使用 JavaScript 以获得更好的可访问性。

:checked 技巧

隐藏的单选输入框充当状态：每个标签页都是与单选输入框关联的 <label>。选中单选输入框后，CSS 同级组合器会显示对应面板，并设置活动标签页标签的样式。完全无需使用 JavaScript。

<div class="tabs">
  <input type="radio" name="tabs" id="tab-1" checked hidden />
  <label for="tab-1">Tab One</label>
  <div id="panel-1">Panel one content</div>
</div>

:checked CSS 架构

请先放置单选输入框，再放置所有标签页标签，最后放置所有面板，并将它们置于同一个容器中。请使用通用同级组合器（~）将选中的单选输入框与对应面板连接起来。面板默认设置为 display: none；匹配的面板则设置为 display: block。

:checked 方案的局限性

:checked 技巧无法更新 ARIA 属性（例如选中状态和控制关系），无法启用标签页之间的方向键导航，而且 DOM 顺序限制（输入框必须位于面板之前）可能与视觉设计要求冲突。这些缺陷限制了真正的可访问性。

JavaScript 标签页组件

JS 标签页组件会监听标签页按钮上的点击事件，为活动标签页设置 aria-selected，更新面板上的 aria-hidden，并管理焦点。这种方式可以实现完整的 ARIA 合规性，并按照 ARIA 编写实践实现键盘交互模式。

标签页的 ARIA 角色

请在容器上使用 role="tablist"，在每个带有 aria-selected 和 aria-controls 的标签页按钮上使用 role="tab"，并在每个面板上使用带有 aria-labelledby 的 role="tabpanel"。屏幕阅读器会朗读标签页数量、位置和选中状态。

键盘交互模式

标签页的 ARIA 编写实践如下：按 Tab 键进入标签页列表，并将焦点置于活动标签页。按向左或向右方向键在标签页之间移动。按 Home 或 End 键跳转到第一个或最后一个标签页。每次按方向键移动时，都会激活获得焦点的标签页（自动激活模式）。

活动状态的 CSS

请使用 [aria-selected="true"] 选择器，通过底部边框或背景变化设置活动标签页的样式——这种方式同时适用于 JS 和 :checked 方案。这样可以让 CSS 与 ARIA 状态属性保持同步，避免进行双重状态管理。

<div role="tablist">
  <button role="tab" aria-selected="true">Overview</button>
  <button role="tab" aria-selected="false">Details</button>
</div>

动画指示器

动画标签页指示器会在标签页之间滑动：放置一个绝对定位的指示器元素，使用 JavaScript 设置其左侧位置和宽度，使其与活动标签页的尺寸相匹配，并使用 transition: left 200ms ease, width 200ms ease 设置动画。

响应式标签页溢出

在小屏幕上，当标签页溢出其容器时，可以使用水平滚动（overflow-x: auto; scrollbar-width: none），也可以在移动设备上折叠为下拉选择框。采用选择框方案时，需要使用 JS 将原生选择框与标签面板的可见性同步。

仅 CSS 与 JS：分别何时使用

对于不重要且不以可访问性为首要约束的简单用户界面，可以使用 :checked 技巧。对于面向键盘用户、屏幕阅读器用户的任何生产环境界面，或需要在审计或法律要求下符合 ARIA 规范的应用，应使用 JavaScript 标签页。

知识检查

CSS :checked 技巧用于标签页时，主要的可访问性限制是什么？

总结

:checked 技巧通过单选输入控件和兄弟组合器实现仅使用 CSS 的标签页切换，但缺少 ARIA 支持和键盘可访问性。使用 ARIA 角色（标签列表、标签页、标签面板）的 JavaScript 标签页，再配合 aria-selected 状态管理和方向键处理，才能为生产环境组件提供完整且可访问的体验。

常见问题解答

「使用 :checked 技巧实现选项卡与 JS 对比」课时是免费的吗？

是的 — 「使用 :checked 技巧实现选项卡与 JS 对比」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「使用 :checked 技巧实现选项卡与 JS 对比」这节课中我会学到什么？

使用 CSS 的 :checked 技巧实现选项卡界面，并将其与 JavaScript 方法进行比较。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用 :checked 技巧实现选项卡与 JS 对比」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy