三层嵌套tab的DOM结构需按作用域分层：外层tab容器内嵌中层tab及其内容区，中层内容区必须作为外层.tab-content的直接后代；每层使用独立name或data-tab-group，避免状态干扰。
三层嵌套 tab 的 DOM 结构怎么组织
三层嵌套不是「div 套 div 套 div」，而是外层、中层、内层内容区域之间存在明确的父子作用域关系。关键在于：中层 tab 必须完全包裹在上层 .tab-content 内，否则 CSS 选择器或 JS 状态无法穿透。
常见错误是把中层按钮和面板平级写在 body 下，导致切换外层后中层状态丢失或样式失效。
- 外层容器加
role="tablist"，每个外层 tab 是role="tab"，对应role="tabpanel" - 中层结构必须完整放在某一个外层
tabpanel内部，不能跨出该节点 - 每层都用独立的
name（radio 方案）或独立的data-tab-group（JS 方案），避免互相干扰 - 首层默认激活项必须显式设置
checked或aria-selected="true"，否则整页空白
用 CSS + radio 实现无 JS 三层切换要注意什么
纯 CSS 方案最稳，但三层时容易断链。核心限制是：CSS 无法跨父级选择，所以中层内容区必须是外层 .tab-content 的直接后代或相邻兄弟。
推荐结构：input[type="radio"] → label（外层 tab）→ .tab-content（外层内容）→ 内含中层 input[type="radio"] → 中层 label → 中层 .tab-content → 内层内容。
立即学习“前端免费学习笔记（深入）”；
- 外层
input的name设为"main-tab"，中层设为"sub-tab"，不可共用 - 中层
.tab-content必须写在上层.tab-content标签内部，不能靠 JS 动态插入到 body - 用
input:checked ~ .tab-content控制显示，但注意~只匹配后续兄弟，不是任意后代 - 若中层内容需动画，别用
max-height: 0，改用opacity+hidden属性配合过渡
JS 管理三层状态时为什么不能用 data-active
直接操作 data-active 或 aria-expanded 在单层没问题，三层一联动就崩：清空全局 data-active 会误关其他分支的展开态，而只查当前父节点又漏掉深层嵌套。
真实场景里，用户可能开着「设置 → 账户 → 安全」，同时另一个外层「日志 → 登录日志」也处于展开态——状态不是扁平的，是树状的。
- 状态应存为对象树，例如：
{ main: 'settings', sub: { settings: 'security' } } - 切换时只更新路径对应字段，如点击「安全」就设
state.sub.settings = 'security' - 渲染时按当前
main值决定外层激活项，再按sub[main]决定中层，避免条件判断嵌套过深 - 不要用
document.querySelectorAll('[data-active]')批量清除——它不区分层级
嵌套 tab 中 iframe/video 表单状态怎么保活
display: none 会让 iframe 重载、video 暂停、input 失焦并清空输入缓存。这不是 bug，是浏览器规范行为。
如果中层或内层含这些动态资源，必须放弃纯 display 切换，改用视觉隐藏 + 语义控制。
- 用
hidden属性替代style.display = 'none'，并在 CSS 中统一定义[hidden] { display: none; } - 对含 iframe/video 的面板，改用
visibility: hidden+position: absolute+inset: 0移出视口，同时保持 DOM 活跃 - 手动同步
aria-hidden="true"和tabindex="-1"，防止键盘焦点落入不可见区域 - 切换前保存 input.value 或 video.currentTime，激活后再恢复——仅当无法避免
display: none时才这么做
三层嵌套最难的不是写代码，是界定每层的控制边界：外层不该知道中层有哪些子项，中层也不该感知内层是否含视频。状态树要扁，DOM 结构要深，样式作用域要窄——这三者稍一错位，就会出现点开 A 却关掉 B 的诡异现象。
