:target实现无js选项卡切换需满足三个前提：href必须为#id格式且不触发页面刷新；目标元素须已渲染并存在dom中；id值与hash严格全等匹配（大小写、空格、字符均一致）。
:target 能实现无 JS 的选项卡切换，但前提是哈希变更必须真实触发浏览器原生导航行为——不是所有“改 URL”的操作都能激活它。
为什么点击链接后 :target 样式不生效
常见失效不是 CSS 写错了，而是三个环节断开：
-
href值写成javascript:void(0)或/#tab2（开头多斜杠会强制刷新） - 目标
<section id="tab2"></section>还没渲染进 DOM，比如在 React/Vue 中靠 state 异步插入 - id 值和 hash 不完全一致：大小写、空格、前缀（如
data-id当作id）、或用了属性选择器（[id="tab2"]）而非真实 id 匹配
:target 选项卡的 HTML 结构必须满足什么条件
结构决定能否联动，不能靠兄弟选择器“猜”位置：
- 每个面板用
<section id="tab1"></section>、<section id="tab2"></section>等，id 必须唯一且与href完全一致 - 导航链接写成
@#@#@#@#@#@#@#@#@#@0，不能是<button></button>或带onclick="return false" - 所有面板需同级存在（最好同父容器），否则
section:not(:target) { display: none; }才能统一控制 - 首次加载无 hash 时，所有面板默认隐藏，需补一条
section:first-of-type { display: block; }显式设第一个为可见
怎样避免页面滚动跳动和布局抖动
直接用 display: none + :target 最简，但会破坏 transition 动画，也容易因重排导致视觉跳变：
- 推荐用
visibility: hidden; position: absolute; left: -9999px;隐藏所有面板，保持可访问性且不占流式布局 -
:target规则只覆盖visibility: visible; position: static; left: auto;，不触发布局重排 - 加动画用
opacity：基础样式设opacity: 0; transition: opacity 0.2s;，:target中设opacity: 1; - 若面板内容高度差异大，避免用
height: 0; overflow: hidden;，它无法过渡，且:target切换时仍可能闪动
SPA 中 :target 失效时怎么兜底
React/Vue 路由常用 pushState，它不改 hash，:target 完全收不到信号：
- 最轻量解法：
window.location.hash = "#tab2"，它会触发:target并自动滚动，兼容性最好 - 若必须用
router.push，得手动同步 hash：router.push({ hash: "tab2" })（Vue Router）或useNavigate("#tab2")（React Router v6.4+） - 动态渲染面板时，确保组件挂载后
id已存在，不要等数据加载完再setAttribute("id", ...) - 别在
useEffect里调scrollIntoView试图“模拟”:target—— 它不会触发样式，只是滚动而已
真正麻烦的是混合使用：一边写 :target { opacity: 1; }，一边又给链接加 preventDefault()，结果样式不触发、JS 也不执行，连问题在哪都难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
