不能用window.location.href实现标签页切换，因其会强制刷新整个页面，导致状态丢失、白屏、seo损害、无法后退及键盘导航中断；真实tab组件须保留在同一html内，仅通过class控制dom显隐来实现平滑切换。
不是“多页面”，是单页内多个内容区的显隐切换——用 display 或 hidden 控制，别用 window.location.href 或 iframe 模拟跳转。
为什么不能用 window.location.href 实现标签页切换
这是最常被误用的点：把“Tab 切换”当成“页面跳转”。window.location.href 会强制刷新整个页面，导致状态丢失、白屏、SEO 损害、无法后退、键盘导航中断。真实 Tab 组件必须保留在同一 HTML 文档内，只切换 DOM 显隐。
- 用户点击“设置”Tab，不希望整个页面重载，只希望“设置面板”出现、“详情面板”消失
- 服务端渲染（SSR）或静态站点生成（SSG）时，
window.location.href会让首屏内容不可见，触发 FOUC（Flash of Unstyled Content） - 移动端 Safari 对频繁
location.href跳转有延迟限制，可能卡顿
data-tab 属性配对比 id + getElementById 更安全
用 id 关联按钮和面板看似简单，但一旦页面中复用多个 Tab 组件（比如侧边栏一个、主区一个），document.getElementById 就会冲突或取错节点。而 data-tab 是局部作用域的自定义属性，天然支持组件化隔离。
- 按钮写
<button data-tab-trigger data-tab="user">用户管理</button> - 面板写
<div data-tab-panel="user">...</div> - JS 中用
document.querySelector(`[data-tab-panel="${target}"]`)精准定位，不依赖全局 id 唯一性 - 避免硬编码索引（如
tabs[2]），DOM 结构调整时逻辑不会断裂
用 class 切换比 style.display 更利于维护和动画
直接操作 element.style.display = 'block' 会覆盖 CSS 文件中的其他 display 声明（比如响应式里设的 display: flex），也难以统一加过渡效果。用 class 控制状态，样式逻辑全在 CSS 里，更可控。
- 定义两个 class：
.tab-panel（基础样式）和.tab-panel--active（显示态） - CSS 中写：
.tab-panel { display: none; } .tab-panel--active { display: block; transition: opacity 0.2s; opacity: 1; } - JS 只负责增删 class：
panel.classList.add('tab-panel--active')、otherPanels.forEach(p => p.classList.remove('tab-panel--active')) - 需要支持键盘导航（Tab 键切换）时，class 方案可配合
[aria-hidden="true"]同步更新语义
首次加载必须手动激活一个 Tab 面板
这是上线后白屏的头号原因：所有面板默认 display: none 或没加 tab-panel--active，JS 初始化又没触发一次点击或显式激活，结果页面空着。
- HTML 中给默认激活的面板加上
class="tab-panel tab-panel--active" - 或在 JS 初始化时主动调用一次切换逻辑：
activateTab('home') - 如果 Tab 数据来自异步请求（如 API 加载 tab 列表），要在数据就绪后才执行激活，不能放在
DOMContentLoaded里盲目执行 - 别依赖“第一个按钮自动被 focus”来触发，focus 不等于 click，且屏幕阅读器用户可能跳过它
真正难的不是切换动作本身，而是状态同步：当前哪个 Tab 激活、URL hash 是否要同步、浏览器前进/后退键是否响应、键盘能否用 ←→ 切换、焦点是否跟随面板移动——这些细节堆起来，才是生产级 Tab 组件的门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
