移动端底部标签页切换必须用JS控制状态而非href跳转，否则会白屏闪动、状态丢失、图标不同步；应保留在同一DOM中切换显示区域，用hidden属性替代display:none，并同步aria-current、history.state与sessionStorage实现刷新恢复。
移动端底部标签页切换必须用 JS 控制状态，不能靠 href 跳转
直接用 <a href="page.html"></a> 切换会白屏闪动，尤其在 MUI、uni-app 或原生 WebView 中——浏览器要卸载当前页面、加载新 HTML，状态全丢，底部图标也不同步。真正在用的方案是：所有页面内容保留在同一 DOM 中，只切换显示区域，同时更新底部按钮的 aria-selected 和 class。
- 每个底部按钮加
data-tab="home"，对应内容区加data-tab-panel="home"，不依赖 ID，避免多组标签页冲突 - 点击时统一隐藏所有
[data-tab-panel]，再设目标面板hidden = false（比display: none更安全，会暂停内部<video></video>和<iframe></iframe>） - 必须手动调用
panel.focus()或panel.setAttribute('tabindex', '0')，否则键盘用户 Tab 键会跳过整个区域 - 别忘了同步更新按钮的
aria-current="page"属性，这对屏幕阅读器识别当前页至关重要
为什么 display: none 在底部导航里特别危险
很多教程教用 style.display = 'none' 隐藏非当前页，但移动端 WebView（尤其是 iOS Safari）下，<video></video> 仍可能缓冲、<iframe></iframe> 继续执行脚本、含 <input> 的表单切走后焦点丢失且滚动位置归零——这不是 bug，是 display 的设计行为。
-
hidden属性才是正确选择：它触发浏览器级暂停，自动处理可访问性状态，且兼容所有现代浏览器（包括 iOS 15.4+） - 如果必须用 CSS 类控制显隐，至少用
visibility: hidden; opacity: 0; pointer-events: none;组合，再配合transform: translateY(100%)避免占位干扰布局 - 切忌在
hidden元素里放setTimeout或轮询逻辑，它被设为true后，内部 JS 仍运行，但 DOM 不可见，容易引发意外交互
底部标签页的 DOM 加载时机容易被忽略
脚本如果写在 里，querySelectorAll('[data-tab]') 会返回空列表——DOM 还没解析完。更麻烦的是，如果底部导航由框架（如 Vue 的 v-for）动态渲染，静态绑定事件会漏掉新插入的按钮。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 首选方案：用事件委托，监听容器元素，比如
tabsContainer.addEventListener('click', e => { if (e.target.matches('[data-tab]')) { ... } }) - 次选方案：包在
document.addEventListener('DOMContentLoaded', ...)里，但无法覆盖后续动态插入的 tab 按钮 - 别用
document.querySelectorAll('button')全局查——页面其他地方的 button 会被误绑，导致意外切换
安卓物理返回键和底部标签页不同步怎么破
用户点底部“我的”页 → 点返回键 → 页面退回到上一页，但底部“我的”按钮还是高亮着，视觉与状态错位。这不是样式问题，是 history 状态没对齐。
立即学习“前端免费学习笔记（深入）”；
- 每次切换标签页时，必须调用
history.replaceState({ tab: 'profile' }, '', '?tab=profile')，让 URL 和当前 tab 一致 - 监听
popstate事件，在返回时主动触发对应 tab 的切换逻辑，而不是等用户再点一次 - 别依赖
location.hash做状态同步——iOS 微信内置浏览器会静默截断 hash 变更，且 SEO 不友好 - 如果用 PWA 或 Capacitor，可结合
App.addListener('backButton', ...)拦截原生返回键，精确控制行为
sessionStorage，并在初始化时读取；但如果用户从分享链接进来（带 ?tab=settings），又要优先以 URL 参数为准——参数、存储、默认值三层优先级必须理清，否则一刷新就跳回首页。 
