用 hidden 属性切换最省心，因其自动暂停媒体、保持焦点、无障碍友好，且仅需两行 JS；data-tab 替代 id 避免冲突，配合 role 和 aria 属性确保键盘导航与屏幕阅读器支持。
用 hidden 属性切换最省心，不用写 CSS 类、不卡顿、自动停媒体、无障碍友好——只要 JS 两行逻辑，就能跑通。
为什么直接用 hidden 比 display: none 更靠谱
它不只是“看不见”，而是让浏览器真正“放手”：内部的 、、 会暂停加载和播放（尤其 Safari 下 display: none 常偷偷缓冲）；表单焦点不会意外丢失；屏幕阅读器自动跳过隐藏面板，无需手动设 aria-hidden="true"。
常见误操作是把 hidden 当成 CSS 属性写在样式里——它是个 HTML 布尔属性，只能通过 JS 设置 el.hidden = true/false 或直接写在标签上。
- 首次加载必须手动移除默认面板的
hidden，否则白屏 - 别用
style.display混搭hidden，两者行为冲突，浏览器以hidden为准 -
hidden支持 CSS 选择器[hidden]，可统一加过渡动画，比如[hidden] { opacity: 0; transition: opacity 0.15s; }
data-tab 映射比 id 更安全，尤其要复用组件时
用 id 绑定按钮和面板（如 button[data-target="tab1"] → div#tab1）看似直觉，但页面多个标签页区域时必然 ID 冲突。改用 data-tab 做语义化配对，解耦 DOM 位置与逻辑关联。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 按钮写
，面板写… - JS 查找用
document.querySelector(`[data-tab-panel="${tab}"]`)，不依赖全局唯一 ID - 注意大小写和空格：
data-tab="Settings "（末尾空格）和data-tab-panel="settings"不匹配 - 避免同时用
id和data-tab-panel，逻辑分支容易漏处理
键盘导航和无障碍不是加分项，是必选项
只靠鼠标点击的标签页，在盲人用户或键盘党面前基本不可用。Tab 键进不去、方向键切不了页签、屏幕阅读器读不出当前状态——这些不是体验问题，是功能缺失。
- 外层容器加
role="tablist"，每个按钮加role="tab"和tabindex="0" - 激活按钮设
aria-selected="true"，其他为"false"；对应面板设aria-labelledby指向按钮 ID - 监听
keydown处理ArrowLeft/ArrowRight，并同步更新焦点和选中态 - 切换后，建议
panel.focus()（需先设tabindex="0"），方便用户继续操作内部表单
真正麻烦的从来不是“怎么显示”，而是“怎么不干扰”：不让隐藏面板偷跑视频、不让切换清空输入框、不让键盘用户掉进空白区。这些细节藏在 hidden 的语义里、data-tab 的松耦合里、aria-selected 的声明里——漏掉一个，就可能让整个标签页在特定设备或场景下失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
