用 div+button+原生JS可实现轻量无障碍多视图切换：需用data-tab和aria-controls语义化关联按钮与面板，aria-selected标识当前项，hidden属性替代display:none隐藏非活跃面板，JS同步更新按钮状态与面板可见性，并确保键盘焦点正确切换。
直接用 div + button + 原生 JS 就能实现轻量、无障碍、可复用的多视图切换容器，不需要框架或插件。
用 data-tab 和 aria-controls 实现语义化标签控制
关键不是“怎么让内容消失”，而是让屏幕阅读器和浏览器知道哪个按钮对应哪块内容。必须用 data-tab 标识目标，用 aria-controls 关联面板，用 aria-selected 反映当前状态。
- 每个 tab 按钮要有
type="button"，避免表单提交干扰 - 每个内容面板加
role="tabpanel"和唯一id，与按钮的aria-controls值严格一致 - 初始时只给一个按钮设
aria-selected="true"，对应面板加tabindex="0"保证键盘可聚焦 - 不要用
display: none隐藏非活跃面板——改用hidden属性，它对辅助技术更友好
切换逻辑必须手动同步 button 和 panel 状态
浏览器不会自动帮你更新 aria-selected 或 hidden，JS 必须显式操作两头。常见错误是只改了面板显示，忘了更新按钮状态，导致键盘导航失效或焦点错乱。
- 点击按钮时，先遍历所有
[data-tab]按钮，清空aria-selected="false" - 再给当前按钮设
aria-selected="true" - 用
document.getElementById(…)找到对应面板，移除hidden；其他所有[role="tabpanel"]加上hidden - 最后调用
panel.focus()，确保键盘用户能直接操作新内容
避免用 iframe 或 frameset 实现切换
frameset 已被 HTML5 废弃，现代浏览器虽仍支持但不保证行为一致；iframe 会隔离 DOM、阻断样式继承、增加跨域风险，且无法自然参与页面 tab 键导航流。
立即学习“前端免费学习笔记（深入）”；
- 不要写
<frameset cols="20%,80%">—— 它在移动端无响应能力，也无法被 CSS Grid/Flexbox 控制 - 不要依赖
target="showframe"切换内容 —— 这种方式绕过 history API，前进/后退键失效 - 如果内容来自外部 HTML 文件，用
fetch()+innerHTML注入更可控，也便于统一处理加载失败、骨架屏等边界情况
CSS 过渡要作用在 visible 状态而非 display
display: none 无法触发 CSS transition，强行加 transition 会失效。正确做法是用 opacity + visibility 或 max-height 配合 overflow: hidden。
- 给所有
[role="tabpanel"]设opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; - 给
.active类（或未加hidden的面板）设opacity: 1; visibility: visible; - 避免用
height动画——内容高度不确定时容易抖动；max-height更稳妥，但需预估足够大的值（如max-height: 500px）
真正难的不是切换动画或按钮样式，而是保持 aria- 属性与 DOM 状态实时一致，以及让 keyboard 用户在 tab 切换后能立刻操作新面板内容。漏掉其中一环，就不是“可用”的组件，只是视觉上像而已。
