多级标签页联动靠“状态传播+显隐隔离”实现：上一级激活才渲染下一级，未选中则disabled且hidden；禁用嵌套tab因html不支持语义继承，会导致读屏器失效、键盘导航中断、状态失控；须用data-level、data-parent、data-tab-group显式声明依赖链；联动分清空→检查→激活三步；css用[hidden]控制显隐与动画更可靠；aria-labelledby需js动态绑定确保读屏准确。
多级标签页联动切换不是靠嵌套 tab 实现的，而是靠「状态传播 + 显隐隔离」——上一级激活时，才允许下一级渲染并响应；上一级未选，下一级必须 disabled 且 hidden。
为什么不能用嵌套 tab 结构？
HTML 原生不支持「tab 内再放 tab」的语义继承。如果把二级 tab 放在一级 tabpanel 里，会导致：屏幕阅读器无法识别层级关系；键盘导航（Arrow 键）在进入子 tab 区域后中断；父级 hidden 属性被移除时，子 tab 的初始状态不可控（比如自动聚焦到第一个按钮，触发意外提交）。真实项目中，所谓“多级”，本质是多个独立 tab 组件按依赖顺序串联。
data-level 和 data-parent 必须显式声明
靠 DOM 位置或 ID 命名规则推断层级极易失效。正确做法是统一加属性标记依赖链：
<div class="tabs" data-level="1" data-tab-group="main"> <button data-tab-trigger data-tab="dashboard">仪表盘</button> <button data-tab-trigger data-tab="project">项目</button> </div> <div class="tabs" data-level="2" data-parent="project" data-tab-group="project-sub"> <button data-tab-trigger data-tab="overview">概览</button> <button data-tab-trigger data-tab="tasks">任务</button> </div>
-
data-level="2"表示这是第二级 tab，只在 level-1 激活对应项后才启用 -
data-parent="project"明确告诉 JS：“我只响应project被选中时的状态” -
data-tab-group用于隔离不同分支，避免跨组误触发（如project-sub不受dashboard影响）
联动逻辑必须分三步执行：清空 → 检查 → 激活
用户从「项目」切到「仪表盘」时，二级 tab 不应残留或静默失效，而要明确走完状态归零流程：
- 监听一级
tab的 click 或aria-selected变更 - 立即调用
clearNextTabs('project')：找到所有data-parent="project"的 tab 容器，移除其aria-selected、设hidden、对内所有button设disabled - 仅当新激活项匹配
data-parent时，才移除对应容器的hidden属性，并启用其内部按钮 - 不自动聚焦二级第一个按钮——焦点保留在一级激活项，由用户主动 Tab 进入
CSS 控制显隐比 JS 操作 style.display 更可靠
直接写 el.style.display = 'none' 会覆盖外部主题样式，且无法与 transition 配合。推荐统一用 hidden 属性 + CSS 规则：
[hidden] { display: none !important; }
.tabs:not([hidden]) { opacity: 1; transition: opacity 0.2s ease; }
.tabs[hidden] { opacity: 0; }
- 所有 tab 容器默认可加
hidden，初始状态可控 - 动画只作用于 visible 状态，避免
display: none导致的重排抖动 - 禁用状态用
pointer-events: none+opacity: 0.5，比单纯disabled在视觉和交互上更一致
最易被忽略的是：二级 tab 的 aria-labelledby 必须动态指向一级当前激活项的 id，否则读屏器会说“选项卡，未命名”。这个绑定不能靠 HTML 写死，得在 JS 激活时实时更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
