不能直接用实现标签页，因其无状态同步机制、缺aria-controls/role="tabpanel"等无障碍属性、不支持互斥切换且css无法批量控制open状态。
<details></details> 和 <summary></summary> 是唯一原生支持点击展开/收起的 HTML 标签组合，但“标签页”（tab）和“折叠面板”（accordion）是两类不同交互模式——前者是互斥切换（一次只显示一个），后者是独立开关（可多开）。直接用 <details></details> 做标签页会违反语义且无法联动控制。
为什么不能直接用 <details></details> 实现标签页切换
原生 <details></details> 没有状态同步机制：每个面板独立维护 open 属性，点开 A 不会自动关掉 B。它也不提供 aria-controls、role="tabpanel" 等标签页必需的无障碍属性。浏览器不会把它识别为 tablist，屏幕阅读器也无法正确导航。
- 点击一个
<details></details>不影响其他，不符合标签页“单选”逻辑 - 无法用 CSS 选择器批量关闭其他项（
details:not(:first-of-type)不能强制设open=false） - 没有
tabindex、aria-selected等可访问性钩子 - 部分旧版 Safari 对 JS 修改
open属性有延迟或不触发重绘
用 button + data-tab + JavaScript 实现真标签页
必须手动管理激活态：点击按钮时，移除所有 .active 类，再给目标面板和对应按钮加回去。关键不是隐藏/显示，而是状态映射与 DOM 同步。
- 每个
button带data-tab="home"，对应面板id="panel-home" - 面板统一加
role="tabpanel"，初始hidden或aria-hidden="true" - JS 中用
document.querySelector(`[data-tab="${tabId}"]`)定位按钮，用document.getElementById("panel-"+tabId)定位内容 - 切换时同时更新：
button.setAttribute("aria-selected", "true")、panel.removeAttribute("hidden")、panel.setAttribute("aria-hidden", "false") - 首次加载建议用
URL.hash或localStorage恢复上一次选中的 tab
max-height 过渡动画在标签页里容易失效的原因
标签页内容高度通常不固定，而 max-height: 0 → max-height: auto 无法过渡——CSS 过渡只认具体数值，auto 被当作文本而非长度。强行设 max-height: 500px 又会导致短内容“拉伸空白”或长内容被截断。
- 解决方案：用
getBoundingClientRect().height或scrollHeight动态读取真实高度，再设为max-height值 - 注意：必须在元素
display: block且未被hidden时读取，否则返回 0；可临时加position: absolute; visibility: hidden;避免闪动 - 更稳妥的做法是放弃高度动画，改用
opacity+transform: translateY()组合，视觉平滑且不触发重排 - 若坚持用 height 动画，需提前知道最大可能高度（如限制内容行数），设死
max-height: 200px并配overflow: hidden
真正做标签页时，别被“折叠”二字带偏——重点不在收起动作，而在状态一致性、可访问性和 DOM 映射关系。哪怕只写三行 JS，也要确保每次点击都同步 button、panel、ARIA 属性和 URL hash，否则移动端双击或键盘 Tab 就会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
