纯css radio方案存在可访问性缺陷与功能局限：无法同步url hash、不支持键盘导航、wcag 2.1不达标，且display:none会导致iframe/video暂停及表单数据丢失；必须用js+aria实现语义化、可访问的多tab切换。
直接用 details/summary 是最快能跑通的方案，但仅适用于单个可折叠标签页；真要多个并列、可互斥切换的 Tab，必须靠 JS 控制结构 + ARIA 语义，否则键盘和屏幕阅读器根本没法用。
为什么不用纯 CSS + radio 实现多 Tab？
它确实能“动”，但实际项目里等于埋雷：
-
input[type="radio"]+:checked依赖 DOM 邻居关系，一加个 wrapper 或动态插入就断掉 - URL hash 不同步，用户刷新页面后回到默认项，无法分享指定 Tab
- 没有
tabindex和role="tab"，Tab 键进不去，方向键切不了，WCAG 2.1 直接不达标 - 面板内容被
display: none后，里面的iframe、video全部暂停，表单输入值也容易丢失
最小可行 JS 切换结构怎么写？
核心就三件事：绑定点击、清旧状态、设新状态。别碰 style.display，只操作 class 和 ARIA 属性：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有按钮加
role="tab"、aria-controls="panel-id"、tabindex="0" - 所有面板加
role="tabpanel"、id="panel-id"、aria-labelledby="tab-id" - 首次加载时手动给第一个按钮加
aria-selected="true"，对应面板加aria-hidden="false" - 点击时只改
aria-selected和aria-hidden，用 CSS 控制显隐（比如.tab-pane[aria-hidden="true"] { display: none; }）
DOM 加载时机和动态内容怎么处理？
常见错误是脚本执行太早或没覆盖异步渲染：
- 不要把 JS 放在
里直接跑 —— 改成包在document.addEventListener('DOMContentLoaded', ...)里 - 如果 Tab 按钮是 API 返回后用 JS 插入的，
querySelectorAll('.tab-btn').forEach()会漏掉 —— 改用事件委托：container.addEventListener('click', e => { if (e.target.matches('[data-tab]')) { ... } }) - 移动端点击有 300ms 延迟，可能误触发两次 —— 在 click 回调里加
e.preventDefault()，并确保按钮是button[type="button"]而不是a标签
含 iframe 或表单的 Tab 怎么避免状态丢失？
关键不是“要不要隐藏”，而是“怎么隐藏”：
- 纯文本/图片内容：放心用
display: none，性能好、语义清 - 带
iframe、video、需保持焦点的表单：改用visibility: hidden+position: absolute占位，同时确保aria-hidden="true"同步更新 - 切走前如果要保留表单值，得自己监听
blur或input存到内存或localStorage，切回来再恢复 —— 浏览器不会帮你记
最易被忽略的是：默认激活项必须手动手动设，不能指望浏览器“自动选中第一个”。哪怕结构完全正确，漏了这一步，页面就是一片空白。另外，aria-controls 的值必须和面板 id 完全一致（大小写、空格、连字符都不能错），否则屏幕阅读器读不出关联关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
