原生HTML标签页切换需手动监听click和keydown事件，用data-tab关联按钮与面板，统一处理并更新aria-selected；切换时须主动暂停iframe/video、管理焦点与滚动位置。
原生 HTML 标签页切换本身没有内置事件，必须靠 JS 手动监听点击或键盘操作，不能依赖 tabchange 这类不存在的 DOM 事件。
用 addEventListener('click') 监听按钮点击是最直接可靠的方式
所有 Tab 切换的本质是用户触发某个按钮（<button></button> 或 <label></label>），然后 JS 修改对应面板状态。监听点击是最可控、兼容性最好、无障碍支持最完整的方案。
- 按钮必须用
<button type="button"></button>，避免意外触发表单提交 - 用
data-tab关联按钮和面板，例如data-tab="settings"对应id="panel-settings" - 监听时不要只绑定一个按钮，而是用
document.querySelectorAll('[data-tab]')统一处理，方便后续动态增删 Tab - 切换前先移除所有面板的
hidden属性（或 class），再给目标面板设hidden = false，避免残留显示
需要响应键盘操作（如 Tab + Enter）？得手动加 keydown 事件
仅监听 click 无法满足无障碍要求：屏幕阅读器用户、键盘导航用户需要按 Tab 移动焦点，再按 Enter 或 Space 触发切换。原生 button 已支持空格/回车激活，但你得确保逻辑一致。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 在 click 处理函数外，**不要另写一套 keyboard 逻辑**，而是复用同一套切换函数
- 给每个按钮加
role="tab"和aria-controls="panel-id"，面板加role="tabpanel"和对应id - 用
event.key === 'Enter' || event.key === ' '判断是否该触发，注意空格键需event.preventDefault()防止滚动 - 别忘了管理
aria-selected状态：切换时更新所有按钮的该属性值
用 display: none 切换时，监听不到 iframe / video 的“暂停”或“销毁”
这是最容易被忽略的副作用：如果你的某个 Tab 面板里嵌了 <iframe></iframe>、<video></video> 或含定时器的脚本，单纯设 style.display = 'none' 并不会让它们停止运行。
-
<video></video>在 Safari 下可能继续缓冲甚至自动播放（尤其带autoplay） -
<iframe></iframe>里的 JS 仍在执行，setInterval不会清除 - 含
<input>的面板切走后，再切回时焦点丢失、滚动位置归零 - 正确做法是用
hidden属性（语义更准）+ 在切换前主动调用iframe.contentWindow?.stop?.()或video.pause()
框架里别混淆 v-if 和 v-show 的监听时机
Vue 用户常误以为 @update:modelValue 能监听 Tab 切换——其实它只响应 props 变化，不是 UI 交互事件。React 同理，useEffect 依赖项变化不等于用户点了哪个 Tab。
-
v-if会彻底卸载组件，适合重资源 Tab（比如图表、地图），但切换时无过渡，且状态清空 -
v-show只切display，等价于原生style.display = 'none'，性能好但有上面提到的资源残留问题 - 真要监听“用户点开某 Tab”这个动作，还是得在按钮上写
@click="onTabClick('log')"，别绕路
真正麻烦的不是监听动作，而是监听之后要同步做的事：清理资源、恢复焦点、保持滚动位置、更新 ARIA 状态。这些细节漏掉一个，就可能让键盘用户卡住，或让视频在后台偷偷跑流量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
