首次加载时需在 domcontentloaded 后立即用 location.hash.slice(1) 获取哈希值，匹配 data-tab 激活对应 tab，空或不匹配则回退至首个；后续通过 window.addeventlistener('hashchange') 监听变化，重新解析并激活，同时同步 aria、焦点与 css 状态。
直接用 location.hash 就能读取 URL 中的 # 后面部分，配合标签页的 data-tab 或 id 关联，就能在加载或跳转时自动激活对应 Tab。不需要后端参与，纯前端可实现。
怎么用 location.hash 触发首次加载时的 Tab 激活
页面一打开，就得检查当前 URL 有没有哈希值，有就立刻激活对应标签页。否则用户点带 #tab2 的链接进来，页面还是默认第一个 Tab。
- 必须在 DOM 加载完成（
DOMContentLoaded）后立即执行，不能等window.onload——后者可能延迟到图片、脚本全加载完 -
location.hash返回的是带#的字符串（如#specs），要用.slice(1)去掉开头的#才能匹配data-tab值 - 如果哈希为空（
location.hash === ""），就按默认逻辑激活第一个 Tab；如果哈希值找不到对应按钮，别报错，悄悄 fallback 到默认项 - 示例逻辑：
const hash = location.hash.slice(1);<br>const tabBtn = document.querySelector(`[data-tab="${hash}"]`);<br>if (tabBtn) {<br> activateTab(tabBtn);<br>} else {<br> activateTab(document.querySelector('[data-tab]:first-of-type'));<br>}
怎么监听后续的哈希变化（比如浏览器后退/前进）
用户点内部链接、按浏览器前进/后退键，URL 哈希会变，但页面不刷新——这时得靠 hashchange 事件捕获并响应。
- 必须用
window.addEventListener('hashchange', handler)，不是onhashchange，后者无法保证事件绑定时机 - 事件回调里要重新取
location.hash，不能依赖 event.oldURL / event.newURL —— 这俩在某些 Safari 版本中不可靠 - 避免重复触发：如果哈希变化后激活的 Tab 已经是当前激活态，就跳过，防止样式重绘或动画闪动
- 注意兼容性：
hashchange在 IE8+、所有现代浏览器都支持，不用 polyfill
为什么不用 URLSearchParams 解析哈希参数
URLSearchParams 是为 ?key=value 查询参数设计的，对 # 后面的内容无效。哈希部分根本不会被它解析，强行传进去会得到空结果。
-
new URL('#tab2', 'https://a.com')会抛TypeError，因为哈希不是合法 URL 路径 - 想从哈希里提取多个键值（比如
#tab=specs&lang=zh），得手动split('&')+split('=')，但这种做法违背哈希语义——哈希本意是锚点标识，不是传参载体 - 真要传结构化参数，应该用查询参数（
?）+ 页面级路由逻辑，而不是塞进哈希；哈希只建议存单一标识符，如#specs、#reviews
容易被忽略的 DOM 同步问题
激活 Tab 不只是显示内容，还要同步按钮状态、ARIA 属性、焦点位置。漏掉任何一项，都会导致键盘用户无法操作、屏幕阅读器误读、或 CSS 动画不触发。
- 必须同时操作按钮和对应面板：给按钮加
aria-selected="true"，其他设为"false"；面板加aria-hidden="false"，其他设为"true" - 激活后要调用
panel.focus()（如果面板可聚焦），否则键盘用户 Tab 键会跳过整个区域 - CSS 里别只靠
.active控制显隐，还得配display: block或visibility: visible，否则即使 JS 加了类，内容仍不可见 - 如果用了
hidden属性，记得在 JS 里用el.hidden = false切换，而不是只改 class —— 两者不互斥，hidden优先级更高
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
