HTML5标签页切换布局技巧解析

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

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

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

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

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

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

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

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

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

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

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

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