首页标签页切换必须确保状态同步、语义完整、首次加载不白屏；应使用data-tab与dataset.target配合定位ID，避免依赖DOM顺序或class，保障多实例复用不冲突。
首页标签页切换不是“要不要加动画”，而是“状态必须同步、语义不能丢、首次加载不能白屏”——三者缺一不可。
data-tab 和 dataset.target 配合取 ID 最稳妥
用 data-tab 关联按钮和面板，比靠 DOM 顺序或 class 名匹配更可靠，尤其当页面复用多个标签组时不会串。
- 按钮写
<button data-tab="news">新闻</button>，对应面板写<div id="news" class="tab-pane">...</div> - JS 中用
btn.dataset.tab拿值（注意不是btn.getAttribute('data-tab')），自动转驼峰且兼容性好 - 必须检查
dataset.tab是否为空，再查document.getElementById(targetId)；查不到就console.warn，别让脚本崩在Cannot set property 'classList' of null - 避免用
id做唯一标识却在多个标签组里重复——改用data-tab-group+data-tab组合隔离作用域
display: none 切换快但会销毁 iframe 和表单状态
首页常嵌 YouTube 视频、地图 iframe 或搜索框，用 display: none 会让它们暂停加载、清空输入、中断播放。
- 轻量内容（纯文本、静态图）放心用
display: none / block - 含动态资源时，改用
visibility: hidden+position: absolute占位，同时设top: -9999px防布局抖动 - 无论哪种方式，都要同步更新
aria-hidden="true/false"和tabindex="-1/0"，否则键盘用户进不去、读屏器读错 - 别依赖 CSS 的
:not(.active) { display: none }—— 这类选择器在首次渲染时可能漏掉初始激活项，仍需 JS 主动初始化
淡入淡出动画必须配 visibility + opacity，不能只靠 opacity
只设 opacity: 0 → 1 过渡，元素仍占文档流、可聚焦、会被读屏器朗读，属于无障碍缺陷。
立即学习“前端免费学习笔记（深入）”；
- CSS 中定义：
.tab-pane { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } - 激活时加类：
.tab-pane.active { opacity: 1; visibility: visible; } - 绝对不要对
display写transition—— 浏览器不支持，动画直接失效 - 移动端建议加
will-change: opacity提前提示渲染优化，低端机滑动更稳
首次加载必须手动触发默认面板显示
HTML 渲染完，JS 还没执行，如果所有面板都带 display: none 或 hidden，首屏就是白的。
- 要么在 HTML 里给默认面板加
style="display: block"或hidden=""反向处理（<div id="home" hidden>，JS 启动后移除 <code>hidden） - 要么在 JS 初始化时主动调用一次切换逻辑，比如
switchTab(document.querySelector('[data-tab="home"]')) - 别指望 CSS 的
.tab-pane:first-child { display: block }—— 它无法感知哪个是“默认”，也不如 JS 控制灵活 - 如果首页用 SSR 渲染，服务端就得输出已激活的类名和样式，否则客户端 JS 注入前存在 FOUC
最易被忽略的是：标签页不是独立组件，它嵌在门户整体结构里。顶部导航、侧边栏、底部版权栏的 z-index、overflow、height 计算都会影响 tab-pane 的定位和显隐表现——切之前先看父容器有没有 overflow: hidden 或 transform，否则动画会截断或错位。
