HTML无原生标签页，三层嵌套本质是结构+CSS显隐+JS交互的模拟；关键在状态管理与作用域隔离，而非DOM层级堆叠。
HTML 本身没有“标签页（tabs）”这个原生元素，所谓标签页嵌套，本质是用 HTML 结构 + CSS 显隐控制 + JS 交互逻辑模拟出来的 UI 模式。三层嵌套不是指三个 <div> 套着写，而是指「外层 tab 切换 → 中层子 tab 切换 → 内层内容区域」这种有层级关系的交互结构。直接硬套 DOM 层级容易失控，关键在状态管理和作用域隔离。
用 <details> + <summary> 快速实现轻量嵌套
现代 HTML 提供了语义化、无 JS 的折叠组件，适合两层以内简单嵌套。三层需手动组合，但比从零写 CSS 更可靠：
-
<details>默认不支持多层联动，但可以嵌套：外层<details>里放一个<summary>和另一个<details> - 浏览器对嵌套
<details>的支持已稳定（Chrome 12+, Firefox 120+, Safari 17.4+），无需 polyfill - 缺点：无法自定义切换动画、不支持键盘
Tab焦点顺序自动管理、无法禁用默认箭头图标（得用::marker覆盖） - 别写成
<details open><details open>...—— 这会导致所有层默认展开，应只给当前激活层加open
纯 CSS 实现 tab 切换时，:checked + <input type="radio"> 是最稳方案
依赖单选按钮的 checked 状态驱动显隐，完全不依赖 JS，适合静态内容或 SSR 场景：
- 每层 tab 必须使用独立的
name，比如外层用name="main-tab"，中层用name="sub-tab"，否则会互相取消选中 - 对应内容区用相邻兄弟选择器
input:checked + .tab-content或通用兄弟选择器input:checked ~ .tab-content控制显示 - 三层嵌套时，中层内容区必须包裹在上层
.tab-content内，否则 CSS 选择器链断开 - 注意：如果某层没设默认
checked，首次加载会全黑——务必给每层第一个 tab 加checked
JS 控制嵌套 tab 时，状态不能存在 DOM 上
用 data-active 或 aria-expanded 标记状态看似直观，但三层嵌套下极易错乱：
立即学习“前端免费学习笔记（深入）”；
- 不要写
document.querySelector('[data-active]').removeAttribute('data-active')全局清空——这会误关其他层的激活态 - 推荐用对象树管理状态：
{ main: 'profile', sub: { profile: 'basic' } }，每次切换只更新对应路径 - 事件委托更安全：监听外层容器的
click，用event.target.dataset.tabGroup和dataset.tabId区分层级 - 移动端点击穿透问题：iOS Safari 在快速连点时可能触发两次
click，加setTimeout防抖不如直接用pointerdown+preventDefault()
嵌套 tab 最容易被忽略的可访问性坑
视觉上能切，屏幕阅读器却卡死，往往因为这几个细节没处理：
- 每层 tablist 必须有
role="tablist"，每个 tab 有role="tab"，对应面板有role="tabpanel"且用aria-labelledby关联 - 三层嵌套时，中间层的
tabpanel必须同时是外层tabpanel的子元素，否则焦点流断裂 - 用键盘
→/←切换同层 tab 时，别让焦点跳到下一层——要拦截keydown并判断当前tabindex所在层级 - 别用
display: none隐藏非激活面板：它会让屏幕阅读器彻底忽略内容；改用visibility: hidden; position: absolute; clip-path: inset(100%)
真正难的不是写出三层 DOM，而是让每一层的状态互不干扰、焦点可预测、响应可中断。多数失败案例都栽在“把嵌套当成结构问题，其实它是状态同步问题”。
