当用户从外部页面（如 https://example.com/#section2）直接访问带锚点的 URL 时，可通过 JavaScript 在页面加载时解析哈希值，并为目标元素添加 active 类，从而实现视觉高亮，弥补 CSS :active 伪类无法跨页面持久生效的限制。
当用户从外部页面（如 https://example.com/#section2）直接访问带锚点的 url 时，可通过 javascript 在页面加载时解析哈希值，并为目标元素添加 `active` 类，从而实现视觉高亮，弥补 css `:active` 伪类无法跨页面持久生效的限制。
CSS 的 :active 伪类仅在用户按住鼠标（或触控）的瞬间生效，且仅作用于当前交互元素，它不会因 URL 中的 fragment（即 #anchor）而自动激活目标元素，更无法在页面初次加载时“回溯”应用。因此，若希望用户从外部链接（例如搜索引擎结果、其他网站或书签）点击 https://yoursite.com/page.html#features 后，页面中的 <section id="features"> 自动获得高亮样式（如背景色、边框或字体加粗），必须借助 JavaScript 主动识别并添加自定义类（如 .active）。
以下是推荐的实现方案（兼容现代浏览器，无需 jQuery）：
document.addEventListener('DOMContentLoaded', () => {
const hash = window.location.hash;
if (hash) {
const targetId = hash.substring(1); // 移除 '#'
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.classList.add('active');
// 可选：滚动到该元素（确保可见，尤其在长页面中）
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
});✅ 关键说明与注意事项：
- 时机准确：使用 DOMContentLoaded 确保 DOM 已就绪，避免因元素未加载导致 getElementById 返回 null；
- 健壮性处理：显式检查 targetElement 是否存在，防止 ID 不存在时脚本报错；
- 语义清晰：使用 classList.add() 而非 className = ...，避免覆盖原有 class；
- 无障碍友好：可配合 aria-current="true" 提升可访问性（例如 <section id="features" aria-current="false"> → 动态设为 "true"）；
-
样式建议：在 CSS 中定义 .active 类，而非依赖 :active，例如：
.active { background-color: #f0f8ff; border-left: 4px solid #007bff; padding-left: 12px; }
⚠️ 注意：不要尝试用 :target 伪类替代——虽然 :target 确实能在 URL 带哈希时匹配对应元素（如 #features:target { ... }），但它属于CSS 原生行为，无法触发 JavaScript 逻辑，也不支持复杂交互（如联动导航菜单高亮、数据统计等）。若需扩展功能（如高亮侧边栏对应菜单项），仍需 JS 驱动。
总结而言，跨页面锚点高亮的本质是「URL 解析 + DOM 操作 + 样式控制」三步闭环。上述原生 JavaScript 方案轻量、可靠、无依赖，适用于任何静态或动态站点，是现代前端实践中的标准解法。
