details 标签不能直接当标签页用，因其无互斥逻辑、无语义标签支持、无障碍识别为独立组件；需 CSS 模拟视觉、JS 同步状态、降级处理兼容性问题。
details 标签本身不支持“带标签的折叠菜单”这种说法——它没有原生标签（tab）概念，也不提供横向切换能力。所谓“带标签”，实际是开发者把多个 details 并列排布、再用 CSS 模拟标签页视觉，但语义和行为仍是独立折叠面板，不是真正的 tab 切换。
为什么不能直接当标签页用
浏览器对 details 的实现是「各自维护 open 状态」，点击一个不会影响另一个，也没有内置的互斥逻辑。想做到「点 A 时收起 B」，必须手动同步状态；想让它们看起来像一排标签，得靠 CSS 排版+边框+选中态样式模拟，而非语义支持。
- 点击不同
details不会自动关闭其他项，需 JS 监听toggle事件并遍历设open = false -
summary默认是块级但有内建 margin 和 marker，直接并排容易错位或间距不均 - 无障碍上，屏幕阅读器会把每个
details当作独立组件读出，不会识别为一组关联标签页（缺少role="tablist"/role="tab"/role="tabpanel"）
如何用 CSS 让多个 details 看起来像标签页
关键不是改 details 行为，而是控制布局与视觉反馈。重点在容器流式排列、去除默认 marker、统一高度与边框、突出当前展开项。
- 给父容器设
display: flex，每个details设flex: 1或固定宽，避免换行 - 重置
summary：加list-style: none清除三角，margin: 0，padding: 8px 12px统一点击区 - 用
details[open] summary改背景色或加下边框，模拟「激活标签」效果 - 所有
details设相同border-bottom: 2px solid #eee，只在[open]时改为强调色（如#007cba） - 内容区（
details > *:not(summary)）设border-top: none，避免双线叠加
展开动画怎么加才不翻车
details 原生切换是突显/突隐，要平滑过渡只能靠 max-height + overflow: hidden，但高度不可预知，硬写死值会导致文字截断或留白。
立即学习“前端免费学习笔记（深入）”；
- 别用
height: auto配transition——它不触发过渡 - 稳妥做法：设一个足够高的
max-height（如500px），确保内容能完全展开；同时加overflow: hidden - 动画只作用于内容区：
details > *:not(summary) { transition: max-height 0.25s ease-in-out; } - 如果内容高度差异极大（比如有的只有 2 行，有的含图片），建议放弃动画，或改用 JS 动态测高再设
max-height
iOS Safari 和微信里点不动 summary 怎么办
这不是你代码写错了，是渲染层问题：iOS Safari（尤其 ≤17.4）和微信 X5 内核对 summary 的点击区域处理异常，常表现为点击无响应、穿透到父层、或焦点卡死。
- 强制给
summary加cursor: pointer和-webkit-tap-highlight-color: transparent - 避免在
summary里嵌套button、a或img，微信会劫持点击事件 - 真遇到点不动，优先降级：用
div+data-open+ JS 控制，summary改为div[role="button"]并同步aria-expanded - 检测 UA：
navigator.userAgent.includes('MicroMessenger') || /iPhone OS [1-9]/.test(navigator.userAgent)，命中则跳过details渲染
最易被忽略的是：你以为在做标签页，其实只是视觉模仿。真正需要标签页语义和键盘导航（Tab 切换、方向键控制）时，details 就不够用了——得切回 role="tablist" 方案，哪怕多写几行 JS。
