17370845950

纯HTML5可用实现无JS标签页，但默认不互斥；需单选时用radio+:checked或JS控制；注意热区≥44×44px、hidden语义优于display:none，且IE不支持hidden。

用

+

实现无 JS 标签页切换

纯 HTML5 就能做标签页，不用写一行 JavaScript。关键在于

是原生可展开/收起的语义化容器，

是它的标题栏，点击自动切换 open 状态。

常见错误是把它当普通 div 用，忘了加 open 属性控制默认展开态，或没处理多组并存时的互斥逻辑（原生不支持单选，得靠 CSS 或少量 JS 补齐）。

• 默认关闭：直接写
  即可
• 默认打开：加 open 属性，即
• 样式定制必须用 CSS，
  默认带小三角，可用 ::marker 或 list-style: none 去掉
• 多个
  同时展开是允许的；如需“单标签页”效果（点一个关其他），得用 JS 监听 toggle 事件手动控制

display: none 切换 vs hidden 属性的性能差异

标签页内容隐藏，别只想着 display: none。HTML5 的 h

idden 属性语义更准，且在多数现代浏览器中渲染性能略优——它明确告诉浏览器“这部分不参与布局、不可访问、不渲染”，而 display: none 是 CSS 行为，触发重排重绘的边界稍模糊。

但注意：两者都**不会停止内部 、 或定时器运行**。如果标签页里有轮播图或播放器，光加 hidden 不够，得配合 JS 暂停。

• 推荐组合： 控制初始状态，再用 JS 动态增删 hidden 属性
• 避免混用：hidden 和 display: block 冲突时，hidden 优先级更高
• 兼容性：IE 完全不支持 hidden，如需支持 IE，回退到 class 控制 display

用 radio + :checked 实现真单选标签页

想纯 CSS 实现“点 A 关 B、C、D”，又不想写 JS？用表单控件 配合相邻兄弟选择器是最稳的方案。每个 radio 对应一个面板，利用 :checked ~ .panel 显示对应内容。

容易踩的坑是 label 和 input 的绑定关系写错，或者忘记给所有 radio 设置相同 name —— 没有同名 name，就不是单选组，无法互斥。

• 结构要点：所有 必须同 name="tabs"，且各自 id 唯一
• label 必须用 for="xxx" 绑定对应 input 的 id，或把 input 包进 label 内
• 面板用
  ，CSS 写 input#tab1:checked ~ .panel:nth-of-type(1) { display: block; }
• 缺点：无法用键盘空格切换（
  支持），且 URL 无法锚点定位到某标签

移动端 touch 区域太小导致标签页点不中

很多 HTML5 标签页在手机上点不动，不是代码错，是

或自定义 tab 按钮的点击热区不足 44×44px。iOS Safari 和 Android Chrome 都会忽略小于这个尺寸的触控目标。

解决方法不是放大文字，而是用 CSS 扩展可点击区域：给

或 tab 元素加 min-height: 44px、padding，并确保 box-sizing: border-box。

• 别只改 font-size，热区大小和字体无关
• 用 touch-action: manipulation 可减少 iOS 300ms 延迟，但不能替代足够热区
• 测试时真机连 devtools 远程调试，模拟器的点击灵敏度常不准

实际项目里，

适合简单 FAQ 类标签页；需要 SEO 友好+URL 锚点跳转，就得结合 history.pushState 和 hashchange；而对动画过渡有要求的，display 切换配 CSS transition 仍是主流做法——HTML5 提供的是能力，不是银弹。