:target 无法单独实现 Tab 切换，需确保 URL fragment 变更、DOM 存在完全匹配的 id、CSS 正确控制显隐与滚动；常见失效原因包括 href 被拦截、id 大小写不匹配、异步渲染导致初始无元素。
:target 本身不能“制作”Tab切换，它只是响应 URL fragment 变化；真正起作用的是你如何用 CSS 控制显隐、滚动和布局——写错一行就全白搭。
为什么点击后内容不显示？三个必须当场核对的点
:target 不是 JS 事件监听器，它只在浏览器地址栏真实变更 #xxx 且 DOM 中存在**完全匹配的 id="xxx"** 时才生效。失效几乎都卡在这三处：
-
href写成javascript:void(0)或被 JS 的preventDefault()拦了——必须让默认跳转发生 - 链接是
#Tab2，但元素写的是id="tab2"——大小写、连字符、空格都必须一字不差 - 面板由 React/Vue 异步渲染，初始 HTML 里根本没有
id="tab2"元素——:target 匹配发生在 DOM ready 后，没元素就永远不触发
:target 配合 display: none 是最常见翻车现场
直接写 .panel { display: none; } + .panel:target { display: block; } 看似简洁，但会引发三重问题：布局塌陷导致内容跳动、SEO 无法索引、屏幕阅读器跳过。更稳的做法是视觉隐藏而非结构移除：
- 所有面板统一设
visibility: hidden; position: absolute; left: -9999px; - 仅对
:target元素重置：visibility: visible; position: static; left: auto; - 若需淡入效果，加
opacity: 0; transition: opacity 0.2s;到基础样式，:target中设opacity: 1;
滚动定位总把内容顶到顶部？别乱套 class
浏览器默认会把 :target 元素滚动到视口顶部，遮住导航栏。想停在导航栏下方，scroll-margin-top 必须写在目标元素自身上：
- ✅ 正确：
#tab2:target { scroll-margin-top: 64px; } - ❌ 错误：
.tabs :target { scroll-margin-top: 64px; }—— 大多数浏览器不认 - 若整个页面需要平滑滚动，加
html { scroll-behavior: smooth; }，但注意 IE 不支持
SPA（React/Vue）里 :target 失效不是 CSS 错了
JS 路由（如 router.push() 或 history.pushState()）默认不触发浏览器原生 fragment 导航行为，:target 就不会更新。实操路径只有两条：
- 最轻量解法：
window.location.hash = "#tab2"—— 它会真实更新 hash、触发 :target、自动滚动，兼容性最好 - 若必须用
pushState，得补一句location.replace("#" + id)或调用document.getElementById(id)?.scrollIntoView()（注意：后者只滚动，不触发 :target 样式） - 确保组件挂载时已渲染带正确
id的面板，不要在useEffect里异步插入再补id
真正难的不是写那两行 :target，而是让 fragment 变更、DOM 存在、CSS 优先级、滚动行为四者严丝合缝——漏掉任意一环，用户点下去就是空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
