Tab切换内容不加载或闪白屏源于DOM渲染时机与资源加载策略不匹配，应首次点击加载并缓存DOM、用display切换而非innerHTML清空，保留表单状态并同步更新多语言标签及焦点管理。
Tab 切换时内容不加载或闪白屏
本质是 DOM 渲染时机和资源加载策略没对齐。常见现象是点击 Tab 后内容区空白几秒，或整个页面重绘导致表单状态丢失。根本原因不是 HTML 写得不对，而是没控制好「何时加载」和「是否复用」。
推荐做法是：首次点击 Tab 时才 fetch 对应 HTML 片段或组件，之后缓存 DOM 节点或数据，切换时不销毁、只 display: none 切换显示。避免每次切换都重新请求 + 重建表单控件。
- 用
data-tab-id标记每个 Tab 面板，配合aria-hidden="true/false"控制可访问性 - 禁用
innerHTML = ''清空内容区——它会销毁所有事件监听器和输入框值；改用classList.toggle('hidden')或style.display - 如果用原生 JS 加载内容，优先用
fetch().then(r => r.text())获取 HTML 字符串，再用element.insertAdjacentHTML('beforeend', html)插入，比innerHTML更可控
怎么让 Tab 切换不丢失表单输入值
用户在「用户管理」Tab 填了一半表单，切到「日志」Tab 再切回来，输入没了——这不是 bug，是默认行为。浏览器不会帮你保活非活动 Tab 的表单状态。
解决思路分两层：DOM 层保留节点，数据层保留值。不要靠反复创建/销毁 <input> 元素，而要提前把所有 Tab 对应的完整 DOM 结构生成好（哪怕初始隐藏），然后只切换可见性。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 初始化时一次性生成全部 Tab 面板 DOM，用
id="tab-panel-users"、id="tab-panel-logs"等唯一标识 - 切换 Tab 时，仅修改当前激活面板的
aria-selected="true"和对应面板的aria-hidden="false"，其他保持aria-hidden="true" - 如需持久化输入值，监听
input事件，把值存在Map或localStorage中，切回时用el.value = map.get(key)恢复
用 data-i18n 实现 Tab 标题多语言同步更新
Tab 标题硬编码成中文后，切语言时标题不变，但内容区文字却变了——这是典型的语义割裂。关键在于 Tab 头部和内容区没走同一套 i18n 更新机制。
必须让 Tab 标签也支持 data-i18n，否则语言切换就只是“局部刷新”。只要 HTML 中有 <button data-i18n="tabs.users"></button>，JS 就能统一扫描并填充。
- 确保所有 Tab 头部元素（
<button></button>、<span></span>、<a></a>）都带data-i18n属性，键名与语言包字段一致 - 语言切换函数里，除了更新内容区，必须调用一次
document.querySelectorAll('[data-i18n]')批量刷新 - 注意 IE11 兼容：用
el.getAttribute('data-i18n')替代el.dataset.i18n
Tab 切换后焦点没落到正确位置
键盘用户按 Tab 键从导航栏进到 Tab 头部，选中后按回车，内容区展开，但焦点还停在按钮上，无法继续操作表单——这违反 WCAG 2.1 的焦点管理要求。
每次激活新 Tab 面板，必须显式把焦点移到该面板首个可聚焦元素（比如搜索框、第一个 <input> 或 <button></button>）。
- 给每个 Tab 面板加
tabindex="-1"，方便.focus() - 切换逻辑末尾加：
document.getElementById('tab-panel-users').focus() - 若首个可聚焦元素是动态加载的（如 Ajax 返回后插入的
<input>），需在fetch回调里延迟执行focus()，用setTimeout(() => el.focus(), 0)或el.focus({ preventScroll: true })
aria-labelledby 和 role="tabpanel" 缺失。没有它们，屏幕阅读器根本不知道哪个面板属于哪个 Tab 头，语言切换和焦点管理都会失效。 
