用data-tab与hidden属性实现画廊标签页切换，需为每个面板独立嵌套灯箱结构、统一使用.zoomable-image类绑定事件，切换时仅重绑当前面板图片监听，并手动暂停其中video以避免后台播放；hidden比display:none更可靠，因其语义明确且自动处理焦点、媒体暂停与可访问性。
用 data-tab + hidden 切换画廊标签页，再触发大图显示
直接在标签页里嵌套完整的大图灯箱逻辑就行，但关键要避免重复初始化、焦点丢失和 hidden 与 display 混用。标签页切换本身不该影响大图功能，前提是每个面板里的图片结构一致、事件监听不重复绑定。
常见错误是：切到第二个标签页后点击图片，document.getElementById('imageModal') 找不到（因为模态框写在第一个面板里），或 click 事件只绑了一次、没随面板重建而重绑。
- 所有标签页面板都应包含独立的
<div id="imageModal"> 结构（哪怕只是占位），或把模态框提到 <code>顶层，确保全局可访问 - 每个面板内的缩略图统一加
class="zoomable-image"和data-large-src，不要依赖 ID 或顺序 - 标签页切换后，只重新激活当前面板内的图片事件监听——用
panel.querySelectorAll('.zoomable-image')而非全局document.querySelectorAll - 首次加载时，必须手动调用一次
initGalleryInPanel(activePanel)，否则第一个标签页的大图也不工作 -
hidden是 HTML 原生属性，兼容所有现代浏览器（IE11+） - 用 JS 切换时写
el.hidden = true/false，比操作style.display更轻量、无 CSS 优先级干扰 - 如果用了 CSS 过渡动画（比如淡出），得配合
opacity+pointer-events: none，hidden本身不支持过渡 - 每个面板初始化时，收集其内部所有
.zoomable-image，生成images数组，并保存到panel.dataset.galleryImages = JSON.stringify(...) - 键盘事件里先获取当前激活面板：
const activePanel = document.querySelector('[role="tabpanel"]:not([hidden])') - 再从该面板读取图片数据：
const imgs = JSON.parse(activePanel.dataset.galleryImages || '[]') -
currentIndex必须是每个面板独立维护的变量，或用Map存：galleryStates.set(activePanel, { index: 0, images: imgs }) - 不要写
modalVideo.src = newSrc，而是：modalVideo.replaceWith(document.createElement('video')) - 重建后，再设
src、poster、controls等属性，并调用load() - 如果用的是
<img alt="HTML画廊标签页怎么切换高清大图" >，则没问题；但一旦混入<video></video>或<iframe></iframe>，就得按这个模式处理 - 注意：重建节点会丢失已绑定的事件监听，所以每次都要重新
addEventListener
为什么不能用 display: none 控制画廊面板的显隐
因为 display: none 下的 <img alt="HTML画廊标签页怎么切换高清大图" > 仍会加载（除非加 loading="lazy"），更严重的是：含 <video></video> 或 iframe 的面板切走后，资源不释放；<input> 失去焦点且切回不恢复；键盘导航（如 Tab）会跳过整个区域——这些不是 bug，是规范行为。
而 hidden 属性语义明确：元素存在但对用户不可见，且浏览器会暂停媒体、丢弃焦点、跳过无障碍树遍历，更适合画廊这类需严格控制资源状态的场景。
立即学习“前端免费学习笔记（深入）”；
如何让每个标签页里的大图都支持方向键切换
方向键必须绑定到 window，但逻辑要按当前激活的标签页隔离——不能让“首页”画廊切到第三张时，“关于”页的缩略图还跟着响应箭头。
核心是把当前画廊的图片数组和索引存成面板级状态，而不是全局单例。每次标签页切换，就更新当前画廊上下文。
大图 modal 里 src 切换后，如何防止 Safari 继续缓冲旧视频
这是 Safari 的已知行为：即使你把 <video></video> 的 src 设为空字符串，它仍可能继续缓冲甚至播放前一个地址。尤其当大图其实是带 poster 的 <video></video> 时，问题更明显。
唯一可靠解法是彻底移除并重建 DOM 节点，而不是改 src。
pause()，哪怕面板已 hidden。必须在切换前手动遍历当前面板内所有 video 元素并调用 pause()，否则 Safari 会在后台持续消耗 CPU 和带宽。
