tab结构必须用语义化标签组合，正确结构是role="tablist"包裹role="tab"按钮和role="tabpanel"内容区，并通过aria-controls与aria-labelledby双向关联；禁用details+summary模拟tab，因其不支持互斥激活、样式控制弱且无障碍支持差。
Tab切换的HTML结构怎么搭才不踩坑
用 <details></details> + <summary></summary> 做Tab是常见误区——它语义是“可折叠内容”，不支持多选卡激活、无法用CSS精准控制当前Tab样式，且无法用JS监听切换事件。真正可控的Tab必须手写结构：ul 作为Tab栏容器，li 为每个Tab项，div 为对应面板，用 data-tab 或 id/aria-controls 显式关联。
关键点：
- Tab项和面板必须一一对应，推荐用
data-tab="panel-1"和id="panel-1"配对，比 class 名匹配更可靠 - 不要把
tabindex硬塞给li——默认不可聚焦，应加在button上（li > button是更健壮的写法） - 避免用
display: none隐藏非激活面板：屏幕阅读器会跳过，需配合aria-hidden="true"和visibility: hidden+position: absolute组合
纯CSS实现Tab切换可行吗？哪些交互必须靠JS
纯CSS能完成基础切换（比如用 :checked + <input type="radio">），但有硬伤：无法动态更新URL哈希、不能响应浏览器前进/后退、无法在切换前做异步校验（如表单未保存时拦截）。所以生产环境几乎都用JS驱动。
最小必要JS逻辑只做三件事：
- 点击Tab时移除所有
.active类，再给目标Tab和对应面板加上 - 设置
aria-selected="true"和aria-hidden="false"等可访问性属性 - 调用
history.replaceState()同步URL（如#settings）
别自己写事件委托去监听 click ——直接绑定到Tab容器上，用 e.target.matches('button[data-tab]') 判断是否点击了有效Tab按钮。
Tab样式细节里最容易翻车的CSS属性
视觉上“漂亮”的Tab，往往败在几个不起眼的CSS细节：
-
border-bottom不要设在ul上——会导致Tab项底部线断开；应该设在li的:after伪元素上，用transform: scaleX(0)+transition做滑动下划线动画 - Tab文字居中别用
text-align: center——当Tab宽度不均时，文字会错位；改用display: flex; justify-content: center; align-items: center - 禁用Tab时，别只改
opacity: 0.5——需同步加pointer-events: none和aria-disabled="true" - 焦点态（
:focus-visible）必须保留，否则键盘用户无法感知当前Tab，且不能仅靠outline——建议用box-shadow: 0 0 0 2px #007bff替代
移动端Tab适配要注意什么
小屏下Tab栏横向放不下是常态，但简单加 overflow-x: auto 会出问题：滚动条遮挡内容、无法用手指精准点击、滚动惯性导致误触相邻Tab。
更稳妥的做法：
- 用
scroll-snap-type: x mandatory+scroll-snap-align: start让Tab自动对齐，配合scroll-behavior: smooth - Tab按钮宽度设为固定值（如
min-width: 80px），用flex: 0 0 auto防止压缩 - 禁用双指缩放（
touch-action: pan-x）避免手势冲突 - 在iOS Safari上，
scroll-snap有兼容性问题，需加-webkit-overflow-scrolling: touch并测试真实设备
别忘了在Tab按钮上加 role="tab" 和 role="tabpanel"，否则VoiceOver等读屏软件识别不了Tab组件语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
