纯HTML无法实现带视觉反馈的锚点选项卡，因href仅触发滚动而不能控制内容显隐或标签高亮；:target伪类虽可显示目标元素，但无法反向激活对应链接样式，且不支持多状态、响应式联动与刷新后自动展开。
用 display 切换标签页最直接，但必须配合 JS 控制 class 或内联样式，纯 HTML 无法动态响应点击。
为什么不能只靠 <a href="#tab1"> 实现标签页切换
锚点跳转（href="#tab1"）只能滚动到目标元素，不会隐藏其他内容、也不会添加高亮状态。它不触发任何显示/隐藏逻辑，只是浏览器原生的定位行为。如果你看到“点了链接内容就变了”，背后一定有 JS 在监听 hashchange 或拦截点击事件。
- 没有 JS 时，
#tab1只会让页面滚到id="tab1"的位置，其余 tab 仍可见 - 多个 tab 共存且仅一个显示，必须靠 CSS 的
display: none/block或visibility: hidden/visible控制 - 当前激活项的视觉反馈（比如加
class="active"）也得 JS 动态写入，HTML 模板里硬编码会失效
document.querySelectorAll("nav a") + dataset 是最轻量的切换方案
不需要框架，几行 JS 就能完成：给每个导航项加 data-tab="tab1"，对应内容区设 id="tab1"，点击时统一隐藏所有内容，再显示目标项。
- 避免操作
style.display内联样式，改用增删class="hidden"更利于维护和复用 CSS - 记得在首次加载时也执行一次，否则刷新后默认 tab 不显示
- 如果导航项和内容区数量多，建议用
Map缓存映射关系，而不是每次遍历查找
示例片段：
立即学习“前端免费学习笔记（深入）”；
const tabs = document.querySelectorAll('[data-tab]');
tabs.forEach(tab => {
tab.addEventListener('click', e => {
e.preventDefault();
const targetId = e.target.dataset.tab;
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
document.getElementById(targetId)?.classList.remove('hidden');
});
});
用 history.pushState() 配合 popstate 支持前进/后退
纯 hash 方案（#tab2）会导致 URL 难看，且无法区分语义化路径；用 pushState 可以把 tab 切换变成类似真实路由的行为，比如 /dashboard?tab=reports。
- 用户点 tab 时调用
history.pushState({ tab: 'reports' }, '', '?tab=reports') - 监听
window.addEventListener('popstate', ...)捕获浏览器前进/后退动作 - 注意服务端需配置 fallback（如 Nginx 的
try_files $uri $uri/ /index.html;），否则直刷/dashboard?tab=reports会 404 - 比起 hash，这种方案更利于 SEO 和分析埋点，但复杂度略升
容易忽略的可访问性坑：键盘焦点与 aria-hidden
只靠 display: none 隐藏非当前 tab，屏幕阅读器可能仍会读出内容，或焦点无法正确落到新 tab 区域。
- 必须同时加
aria-hidden="true"到隐藏的 tab 内容容器上 - 切换后，用
element.focus()主动把焦点移到新 tab 的 heading 或首个可交互元素 - 导航项要支持
Enter和Space键触发，不只是鼠标点击 - 别忘了用
role="tablist"、role="tab"、role="tabpanel"补全 ARIA 语义
真正麻烦的从来不是“怎么让内容变”，而是“怎么让所有人——包括键盘用户和读屏器使用者——都感知到这个变化”。
