适合新手的HTML标签式多页切换代码-html教程-PHP中文网

+和radio+label均可实现无js多页切换：适合松散折叠内容，语义清晰、自带状态；radio方案适合严格单页互斥场景，依赖:checked与~选择器精准控制显隐。

适合新手的html标签式多页切换代码

用 `<details></details>` + `<summary></summary>` 实现无 JS 多页切换

不需要写一行 JavaScript，也能做出点击切换内容的效果。关键不是“多页”，而是把不同区块折叠展开——<details></details> 原生支持开合状态，语义清晰、键盘可访问、移动端友好。

常见错误是强行套用 <div> + class 控制显隐，结果焦点丢失、屏幕阅读器不可读、刷新后状态重置。而 <code><details></details> 自带 state 管理，浏览器原生记住展开/收起状态（除非页面刷新）。

<details></details> 默认收起，加 open 属性可默认展开
每个 <details></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></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><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
														src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
													<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div></section><section class="page"><p>关于内容</p></section>
</div>

CSS 中用：input#home:checked ~ .pages .page:nth-of-type(1) { display: block; } 类似方式控制显隐。