最直接方案是用 display 切换内容区，需先统一隐藏所有内容块再显示目标，避免多显或全空；data-target 配合 JS 控制，注意 null 判断；无 JS 方案中 radio+ :checked 最可靠，但限制多。
用 display 切换内容区最直接，但必须同步状态
核心不是“动画”，而是点击标签后，只让对应内容块可见，其余全部隐藏。常见错误是只设目标 display: block，却忘了先清空其他所有内容块的显示状态，结果多个内容同时出现或全空白。
- 每个标签按钮加
data-target属性，比如<button data-target="home">首页</button> - 所有内容区初始统一设
style="display: none;"或用 class 如.tab-content { display: none; } - JS 中先遍历所有内容区，统一设
display = "none"；再用document.getElementById(targetId)找到目标并设为block - 务必检查
targetId是否为空或无效——document.getElementById("")或document.getElementById("xxx")找不到元素时返回null，后续操作会报Cannot set property 'display' of null
<details>+<summary> 无 JS 标签页，但互斥需手动补
原生支持展开/收起，不用写 JS 就能切换，但默认不互斥：点开一个，其他不会自动关闭。想实现“单选标签页”效果，得靠 CSS 或少量 JS 控制。
- 默认关闭写
<details>，默认打开加open属性：<details open> - 多组并存时，若需互斥，监听
toggle事件，手动调用其他<details>的removeAttribute('open') - 别用
display: none隐藏未激活内容——推荐用 HTML5 的hidden属性，语义更准，且现代浏览器中渲染性能略优（IE 不支持，需降级） - 注意：无论
hidden还是display: none，都不会暂停内部<video>、setInterval等运行，有轮播图或音频需额外 JS 暂停
用 <input type="radio">+ :checked 实现纯 CSS 单选标签页
这是唯一不依赖 JS 就能保证“点 A 关 B”的方案，适合静态内容或对 JS 加载敏感的场景。但结构约束强，稍不注意就失效。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 所有 radio 必须同名：
<input type="radio" name="tabs" id="tab1">，name 值不一致就无法互斥 - label 必须正确绑定：用
for="tab1"或把 input 包进 label 标签内 - 内容面板用
<section class="panel">，CSS 写input#tab1:checked ~ .panel:nth-of-type(1) { display: block; } - 缺点明显：无法键盘空格切换（
<details>支持），URL 无法锚点定位，移动端热区不足 44×44px 时易点不中
iframe 方案看似简单，但同源和高度适配是硬门槛
它真能“无刷新”，但代价是隔离性。页面结构分离了，但 DOM、JS、历史记录都不同步，不是 SPA 替代品，而是特定后台系统的快速解法。
立即学习“前端免费学习笔记（深入）”；
- 关键匹配：a 标签的
target和 iframe 的name必须**完全一致**（大小写、空格、下划线都敏感） - 别设
src=""或src="javascript:void(0)"——初始阻塞渲染；推荐src="about:blank"，再用 JS 懒加载真实地址 - 同源时自适应高度，别在
onload里直接读contentDocument.body.scrollHeight；加setTimeout(..., 0)或监听DOMContentLoaded，否则 Safari 和部分 Android WebView 会取到 0 - 跨域？父页无法读子页 DOM，高度只能靠服务端返回固定值，或子页主动
postMessage通知
index.html#tab2 或带 query 参数的链接，页面必须立刻激活对应标签，而不是等用户点一下才响应。这点在 display 和 radio 方案里常被跳过，在 iframe 和 History API 场景下更是断层高发区。 
