标签页切换需手动绑定数据源与面板状态，核心是按需加载而非单纯切换；应以data-tab值为唯一标识匹配数据对象key，用映射对象管理数据，切换时仅更新容器内容、缓存表单状态、合理隐藏动态资源，并同步tab激活、列表渲染、URL更新、滚动位置和焦点管理。
标签页切换本身不自动关联列表数据，必须手动绑定数据源与面板状态——点击哪个 tab，就渲染对应的数据列表。核心不是“切换”，而是“按需加载/显示”。
data-tab 和数据数组索引怎么对上
别靠 DOM 顺序或 li 下标去取数据，容易错位。用 data-tab 做唯一标识，和数据对象的 key 或 id 字段严格一致。
- HTML 中按钮写
<button data-tab="users">用户列表</button> - JS 里维护一个映射对象：
const tabData = { users: [...], posts: [...], comments: [...] } - 点击时读
btn.dataset.tab，再查tabData[tabKey]，安全又可读 - 如果后端返回的是扁平数组（如
[{tab: "users", items: [...]}, ...]），先用find()提取，别硬写data[1]
列表渲染要不要每次重新 createElement
不用。首次渲染后，后续切换只更新内容，不重建 DOM 节点——否则 input 失焦、滚动位置丢失、事件监听器断掉。
- 给每个面板预留一个容器节点，比如
<div id="panel-users" class="tab-pane"><ul class="list-root"></ul></div> - 渲染函数接收数据数组和目标容器，清空
.list-root.innerHTML后逐项append(li)，而不是整个innerHTML = str - 若列表项含表单控件，用
textContent填文本，用value属性设输入框值，避免重置状态 - 需要保留用户编辑中的内容？切换前把当前面板所有
input的value缓存到内存，切回来再恢复
为什么用 display: none 切换列表会丢 iframe 或 video
display: none 让元素彻底脱离渲染树，内部资源（<iframe></iframe>、<video></video>、<canvas></canvas>）会被暂停或卸载。这不是 bug，是浏览器行为。
立即学习“前端免费学习笔记（深入）”；
- 轻量静态列表（纯文字+图片）用
display最省事 - 含动态资源的 tab，改用
visibility: hidden+position: absolute隐藏，同时加aria-hidden="true"保证无障碍 - 必须用
display但又要保状态？在隐藏前手动保存iframe.contentWindow.location.href或video.currentTime，显示时再恢复 - 别用
hidden属性替代样式控制——它语义正确但兼容性略差（IE 不支持），且不能配合 CSS 过渡动画
URL hash 变化时怎么同步激活 tab 和列表
用户点后退/前进，或直接访问 #posts，tab 和列表都得响应。不能只监听 click。
- 用
window.addEventListener('hashchange', handler)监听 URL 变化 - handler 里解析
location.hash.slice(1)得到 tab key，再调用和 click 相同的切换逻辑 - 首次加载也要执行一次：检查
location.hash，有则激活对应 tab；没有则默认激活第一个 - 切换成功后，记得调用
history.replaceState()把当前 tab 写进 history，避免重复触发 - 注意：不要在 hash 变更时直接
location.hash = 'xxx'，这会再次触发hashchange，导致死循环
最常被忽略的是状态同步粒度——tab 激活、列表渲染、URL 更新、滚动位置、焦点管理，这五件事必须在同一个逻辑块里完成，否则用户会看到「标签高亮了但内容没变」或「URL 已跳转但键盘焦点还在旧 tab 上」。
