用 hidden 属性控制表格标签页最省心：它保留 DOM、避免重排失效和焦点丢失，自动暂停媒体、释放 iframe，保障可访问性与状态延续性。

用 hidden 控制表格标签页最省心

含大量

、分页控件或动态渲染逻辑的标签页，别碰 display: none——它会让表格重排失效、scrollIntoView 失效、input 焦点丢失，且 Safari 下 可能继续缓冲。直接上 hidden 属性，浏览器自动暂停媒体、释放 iframe、重置可访问性状态，表格 DOM 完整保留，后续切换无闪动或错位。

• 所有非当前面板加 hidden 属性，包括含

的

首次加载必须手动移除默认面板的 hidden，否则整个表格区域空白

JS 切换只需两行：document.querySelectorAll('[role="tabpanel"]').forEach(p => p.hidden = true)，再设目标 p.hidden = false

不要用 setAttribute('hidden', '')，直接赋值布尔属性：p.hidden = true 更可靠

表格内容多时，别销毁 DOM

Vue/React 里用 v-if 或 {show &&

} 切换标签页，等于每次切走就卸载整个表格组件：分页状态清空、IntersectionObserver 断掉、requestAnimationFrame 中断、已选中的行丢失。真实业务中，用户切到“统计”页再切回“订单”，不该重新拉取数据或重置筛选条件。

• Vue 用 v-show 替代 v-if，保留实例和内部状态
• React 用 style={{ display: show ? 'table' : 'none' }}，别用条件渲染 JSX
• 原生 JS 场景下，确保表格容器始终在 DOM 中，只切 hidden 或 class
• 若真要释放资源（比如大图预览页），应在 beforeunload 或离开前手动清理，而非依赖隐藏触发

键盘导航和屏幕阅读器不能漏

纯鼠标点击的表格标签页，在无障碍测试里基本为零分。用户按 Tab 进不去页签、ArrowRight 切不了下一个、屏幕阅读器读不出当前在哪一栏，这些不是“锦上添花”，是 WCAG 2.1 强制要求。

• 外层容器加 role="tablist"，每个按钮加 role="tab" 和 aria-controls="panel-id"
• 激活态按钮设 tabindex="0"，非激活态设 tabindex="-1"
• 对应表格面板加 role="tabpanel"、aria-labelledby="tab-id"、tabindex="0"
• 监听 keydown 捕获 ArrowLeft/ArrowRight，并 focus() 到目标按钮

data-tab 映射比 ID 顺序更安全

靠 querySelectorAll('.tab-item')[i] 和 querySelectorAll('.tab-pane')[i] 硬绑索引，一旦中间插入新标签或服务端渲染顺序微调，整个切换逻辑就错位。尤其表格类页面常有动态增删 Tab 的需求，索引方案根本不可维护。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 每个按钮写 data-tab="orders"，对应面板写 id="panel-orders"
• JS 里统一用 document.querySelector(`#panel-${tab}`) 查找，不依赖 DOM 位置
• 避免拼错：data-tab="order-list" 和 id="panel-orderlist" 不匹配，会导致 querySelector 返回 null
• 加一层防护：if (!targetEl) return console.warn('No panel found for tab:', tab)

表格标签页真正的复杂点不在切换动作本身，而在状态延续性——滚动位置、分页页码、排序字段、已勾选行、甚至正在输入的搜索框内容，这些都得跨切换保持。用 hidden 是起点，但要不要持久化 localStorage、是否在 visibilitychange 里保存当前 Tab，得看具体场景。