<details>+<summary>和radio+label均可实现无JS多页切换：<details>适合松散折叠内容，语义清晰、自带状态；radio方案适合严格单页互斥场景，依赖:checked与~选择器精准控制显隐。
用 <details> + <summary> 实现无 JS 多页切换
不需要写一行 JavaScript，也能做出点击切换内容的效果。关键不是“多页”，而是把不同区块折叠展开——<details> 原生支持开合状态，语义清晰、键盘可访问、移动端友好。
常见错误是强行套用 <div> + class 控制显隐，结果焦点丢失、屏幕阅读器不可读、刷新后状态重置。而 <details> 自带 state 管理，浏览器原生记住展开/收起状态（除非页面刷新）。
-
<details>默认收起，加open属性可默认展开 - 每个
<details>是独立的，互不影响，适合并列的“页面”式区块 - 不支持 CSS 动画过渡（
open是布尔属性，非 class），如需淡入效果得额外加 JS - IE 完全不支持，Edge 79+、Chrome 12+、Firefox 49+、Safari 12.1+ 可用
<details> <summary>首页</summary> <p>这是首页内容…</p> </details> <details> <summary>关于</summary> <p>这是关于页面…</p> </details>
用 radio + label 模拟单选页签（纯 HTML/CSS）
如果需要“一次只显示一个”且有页签样式（比如底部横条、顶部 tab），<input type="radio"> 是更稳的选择。它天然互斥，无需 JS 绑定事件，靠 CSS 的 :checked 和兄弟选择器控制显隐。
容易踩的坑：label 没绑定到正确 radio、CSS 里漏写了 input[type="radio"]:checked ~ .page 这类关键选择器、没给 radio 加 name 导致无法互斥。
立即学习“前端免费学习笔记（深入）”；
- 所有 radio 必须共用同一个
name，例如name="tab" - 每个
<label>的for属性必须匹配对应 radio 的id - 目标内容区块要用
~（通用兄弟选择器）或+（相邻兄弟）定位，不能用后代选择器 - 初始默认页靠给某个 radio 加
checked属性实现
<input type="radio" name="tab" id="home" checked> <label for="home">首页</label> <input type="radio" name="tab" id="about"> <label for="about">关于</label> <div class="pages"> <section class="page"><p>首页内容</p></section> <section class="page"><p>关于内容</p></section> </div>
CSS 中用：input#home:checked ~ .pages .page:nth-of-type(1) { display: block; } 类似方式控制显隐。
为什么不用 display: none 直接切？
新手常写 document.getElementById('page1').style.display = 'block'，但这样会破坏可访问性：隐藏内容仍被屏幕阅读器读出（除非加 aria-hidden="true"），键盘 Tab 顺序混乱，SEO 不友好，且每次都要手动管理显隐状态。
真正要的是“条件渲染”而非“条件显示”。上面两种方案本质是：内容始终在 DOM 中，只是视觉上折叠或通过 CSS 隐藏——前者保留语义和可访问性，后者靠 CSS 规则隔离状态。
-
<details>：适合内容体量小、结构松散、不要求严格单页逻辑的场景 - radio 方案：适合页签明确、需要互斥、希望样式可控（比如加 border-bottom 激活态）的场景
- 两者都不依赖 JS，但 radio 方案对 CSS 选择器精度要求更高，稍写错就全不生效
移动端点击区域太小？补个 padding 就行
<summary> 默认只有文字可点，<label> 默认块级但可能没撑满。用户手指点不中，不是逻辑问题，是样式没做。
- 给
<summary>加padding: 12px 16px，再配cursor: pointer - 给
<label>加display: inline-block和足够 padding，避免文字紧贴边缘 - 别用
font-size: 0或负 margin 去“隐藏” radio，它必须可聚焦，否则键盘用户无法操作 - 测试时真机点一点，别只靠鼠标 hover 判断是否可用
复杂点在于 radio 方案里，CSS 选择器链一旦变长（比如嵌套层级深），~ 就失效了——这时要么扁平化 HTML 结构，要么老老实实用 JS。
