不能靠纯 html 实现动态新增标签页，必须用 javascript 控制 dom；html 仅提供初始结构，tablist 和 tabpanel 是语义容器，增删逻辑全由 js 实现。
怎么用原生 JavaScript 动态添加 HTML 标签页
直接说结论：不能靠纯 HTML 实现动态新增标签页，必须用 JavaScript 控制 DOM；HTML 只负责初始结构，tablist、tabpanel 这些语义化标签只是容器，增删逻辑全在 JS 里。
常见错误是把 <template></template> 当成“自动渲染模板”，或者给按钮加 href="javascript:void(0)" 却没绑定任何事件——点完毫无反应。
关键思路是：每次新增，要同步操作三处 DOM：tablist 里加一个 tab 按钮，tabpanels 容器里加一个 tabpanel，再手动触发一次激活逻辑（比如设 aria-selected="true"、切换 hidden 属性）。
实操建议：
- 用
document.createElement()创建新 tab 元素，别拼接字符串 HTML（易 XSS，难维护） - 每个新 tab 的
id和对应 panel 的aria-labelledby必须匹配，否则键盘导航失效 - 新增后立即调用
focus()到新 tab，保证可访问性 - 别忘了给新 panel 设
hidden属性（或display: none），避免所有面板同时显示
为什么 addEventListener 绑在 container 上比绑在每个 tab 按钮上更稳
因为动态新增的 tab 按钮，在页面加载时根本不存在，直接 querySelectorAll(".tab-btn").forEach(...) 会漏掉它们。
事件委托才是正解：把监听器挂在父容器（比如 tablist），用 event.target.matches("[role='tab']") 判断是否点中了 tab。
这样后续无论 append 多少个新 tab，都不用重复绑定事件。
实操建议：
- 给
tablist加唯一id或data-role="tabs"，方便 JS 定位 - 在事件回调里用
event.target.getAttribute("data-tab-id")获取目标 ID，别依赖 class 名或索引 - 删除 tab 时，记得同时移除对应 panel，否则 DOM 泄漏
aria-selected 和 hidden 怎么配对才不翻车
只设 aria-selected="true" 不等于面板可见——这是最多人踩的坑。ARIA 属性只是“告诉屏幕阅读器”，不控制样式或行为。
必须配合 CSS 或 JS 手动控制显隐，否则用户看到的是“选中了但内容没出来”，或者“内容一直堆在页面底部”。
推荐用 hidden 属性 + CSS 规则：[hidden] { display: none; }，比操作 style.display 更干净。
实操建议：
- 激活某 tab 时：先给所有 tab 清掉
aria-selected="true"，再给当前设上；所有 panel 先加hidden，再给对应 panel 移除 - 不要用
visibility: hidden替代hidden，它仍占布局空间，且不被 screen reader 忽略 - 如果用了 CSS-in-JS 或框架，确保
hidden属性能穿透到真实 DOM 节点
新增 tab 后怎么保持键盘导航（Tab/→/←）正常
新增的 tab 默认不在焦点管理链里，按 Tab 键会跳过它；方向键切换也会卡住——因为没有正确设置 tabindex 和 role。
每个 tab 必须有 role="tab"、tabindex="0"（激活态）或 tabindex="-1"（非激活态），panel 要有 role="tabpanel" 和 tabindex="0"（可聚焦内容区）。
实操建议：
- 新增 tab 后，立刻设
tabIndex = 0并focus()，否则键盘用户无法抵达 - 方向键逻辑自己写：监听
keydown，检测ArrowRight/ArrowLeft，然后找兄弟节点中下一个/上一个[role="tab"] - 别依赖第三方库的“自动焦点管理”，动态场景下它常滞后或错位
最麻烦的其实是焦点恢复：关闭某个 tab 后，得判断该激活左边还是右边的 tab，还要考虑只剩一个 tab 的边界情况——这里很容易写死或漏 case。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
