CSS DEVELOPMENT LAB · 10

Tabs 标签页

产品详情、技术参数、下载资料、FAQ 分类都经常使用 Tabs。本实验重点研究：如何让多个标签共享一套结构和逻辑，并兼顾鼠标、键盘与响应式。

CORE DEMO

一套结构，多组内容

JavaScript 不关心具体有几个 Tab，只读取 `role="tab"` 与对应的 `aria-controls`。后期新增标签时，不需要继续复制事件代码。

CSS 负责激活样式、内容布局、横向滚动和响应式

JavaScript 负责 active 状态、ARIA 同步与键盘焦点

OVERVIEW

适合企业官网和产品详情页的通用 Tabs 结构

当前面板显示产品概述。Tab 按钮只控制哪一个 Panel 被激活，内容本身仍然保持独立、清晰的 HTML 结构。

STATE MODEL

Tab 的核心只有一个：当前谁是 active

button.classList.toggle(
  "is-active",
  shouldActivate
);

panel.hidden =
  !shouldActivate;

button.setAttribute(
  "aria-selected",
  String(shouldActivate)
);

KEYBOARD

左右方向键也应该能切换

←

切换到前一个 Tab。

→

切换到下一个 Tab。

Home

First

直接跳到第一个 Tab。

End

Last

直接跳到最后一个 Tab。