最直接的标签页切换用 display，但需注意渲染影响：display: none 会暂停 iframe/video/audio 并丢失表单状态；轻量内容可用 display 切换，动态资源宜用 visibility + absolute 定位，并同步更新 aria-hidden、role 和 tabindex 以保障无障碍。
用 display 切换标签页最直接，但要注意隐藏内容是否参与渲染
多数人第一反应是用 display: none 控制面板显隐，这确实简单有效。但得清楚：设为 display: none 的元素完全脱离文档流，其内部的 iframe、video、audio 会暂停加载或播放，表单控件（如 input）的焦点和输入值也容易丢失。
实操建议：
- 若标签页内容轻量（纯文本、静态图片），直接用
display: none+display: block切换即可 - 若含动态资源（比如嵌入的
iframe或需保持状态的表单），改用visibility: hidden+visibility: visible，但要额外加position: absolute避免占位空白 - 切换时别只改样式，记得同步更新
aria-hidden属性，保障屏幕阅读器可用性
tabindex 和 role="tablist" 是键盘导航的关键
纯鼠标点选的标签页在无障碍场景下基本不可用。用户按 Tab 键进不到标签项，方向键切不了页签，这是常见疏漏。
必须补全语义化结构：
立即学习“前端免费学习笔记（深入）”；
- 外层容器加
role="tablist" - 每个页签是
role="tab"，并设tabindex="0"（当前激活页签设tabindex="-1"） - 对应面板加
role="tabpanel"，并通过aria-labelledby指向页签的id - 用
keydown监听ArrowLeft/ArrowRight实现方向键切换
用 details/summary 快速实现单页折叠式标签页
如果只要最简效果（比如 FAQ 折叠区），不用写 JS，原生 details 就能当单个标签页用，兼容性到 Chrome 12 / Firefox 49 / Safari 6.1。
示例结构：
<details> <summary>标题一</summary> <p>内容区...</p> </details>
注意点：
- 不支持多面板同时展开（浏览器强制单开），也不支持横向排列页签
- 无法用 CSS 精确控制箭头图标（
summary::marker支持有限），Safari 下默认箭头不可隐藏 - 若需自定义样式，得重置
summary的list-style并手动加伪元素图标
Vue/React 里别在 v-if 或 {show && <panel>}</panel> 里销毁组件
框架中常误用条件渲染来“切换”标签页，比如 Vue 的 v-if 或 React 的逻辑与运算符。这会导致组件反复挂载/卸载，表单数据清空、定时器中断、动画重来。
更稳妥的做法：
- Vue：用
v-show替代v-if，保留 DOM 和组件实例 - React：用
style={{ display: show ? 'block' : 'none' }}或 CSS 类控制显隐，而非条件渲染 JSX - 若真需要销毁（比如释放大图资源），应在组件
unmounted或useEffect清理逻辑里主动处理，而不是依赖框架销毁时机
复杂点在于：视觉上“切换”和逻辑上“状态管理”不是一回事。很多人卡在以为样式切了就等于功能完成了，其实焦点管理、资源生命周期、服务端同步这些才是后续掉坑的地方。
