用 hidden 属性切换最稳妥，语义清晰、兼容可控，避免 iframe/video 意外加载，但需手动暂停内部资源；display: none 仍会渲染、不释放资源、不触发媒体暂停，易致焦点丢失和滚动重置。
用 hidden 属性切换最稳妥，比 display: none 语义清晰、兼容可控，且避免 iframe/video 意外继续加载——但得手动暂停内部资源。
为什么别直接用 display: none 切换标签页
它会让浏览器“假装看不见”，但实际仍在渲染流里做无用功；更关键的是，它不触发媒体暂停、不释放 iframe 资源、不重置表单焦点。Safari 下 在 display: none 时仍可能缓冲甚至播放；含 的面板切走后，再切回时焦点丢失、滚动位置归零。
常见错误是误以为 display: none 等价于“停掉一切”，结果轮播图还在跑、音频还在播、定时器没清理。
- 轻量静态内容（纯文本、图片）可用
display切换 - 含
、、表单或 JS 动态逻辑的，必须配合 JS 手动暂停/恢复 - 想加淡入动画？用 CSS 类控制
opacity+transition，别硬塞display
hidden 属性怎么用才不出错
hidden 是 HTML5 原生布尔属性，语义明确：该元素不参与渲染、不可访问、不占布局空间。现代浏览器中性能略优于 display: none，且支持 [hidden] CSS 选择器统一控制样式。
容易踩的坑：
- 首次加载必须手动移除默认面板的
hidden，否则白屏——比如要在 JS 初始化时设document.querySelector('#panel-home').hidden = false- 别混用：
hidden和display: block同时存在时，hidden优先级更高，会导致样式失效- IE 完全不支持
hidden，需回退到 class 控制（如.is-hidden { display: none; }）推荐写法：
，JS 中只操作.hidden = true/false，不碰style。如何让标签按钮和面板安全关联
核心是用
data-tab建立映射，不依赖 DOM 顺序或 ID，避免组件复用时冲突。
htmlppt.skill下载把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
实操要点：
- 每个按钮写
，对应面板写- JS 中用
btn.dataset.tab取值，拼出目标 ID：`#panel-${tab}`，再用document.querySelector()查找- 查找前务必校验：
if (!targetId) return;，查不到元素时跳过，避免Cannot set property 'hidden' of null- 切换逻辑只需两步：所有面板设
p.hidden = true，目标面板设p.hidden = false示例片段中，
document.querySelectorAll('[role="tabpanel"]')比遍历 class 更可靠，因为role="tabpanel"是语义化必需属性，不易被误删或覆盖。无障碍和键盘导航不能漏
纯鼠标点选的标签页在屏幕阅读器下基本不可用。用户按 Tab 键进不到标签项，方向键切不了页签，这是常见疏漏。
必须补全：
- 外层容器加
role="tablist" - 每个页签是
role="tab"，当前激活项设aria-selected="true"和tabindex="0"，非激活项设tabindex="-1" - 对应面板加
role="tabpanel"，并通过aria-labelledby指向页签的id - 用
keydown监听ArrowLeft/ArrowRight实现方向键切换
复杂点在于：焦点管理要同步——切换面板后，
tabindex="0"得移到新面板上，否则键盘用户无法继续操作内容区内的控件。 - JS 中用
- 别混用：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
