本文介绍如何在用户通过外部 URL（如 https://example.com/#section2）访问页面并触发锚点跳转后，自动为目标元素添加 CSS active 类，从而实现视觉高亮，弥补原生 :active 伪类仅作用于点击瞬间的局限。
本文介绍如何在用户通过外部 url（如 https://example.com/#section2）访问页面并触发锚点跳转后，自动为目标元素添加 css `active` 类，从而实现视觉高亮，弥补原生 `:active` 伪类仅作用于点击瞬间的局限。
当用户从站外（例如搜索引擎、其他网站或书签）点击一个带锚点的链接（如 https://yoursite.com/page.html#features）进入页面时，浏览器会自动滚动至 ID 为 features 的元素，但原生 :active 伪类不会被保留——它只在鼠标按下/触摸期间生效，且无法通过 URL 触发持久状态。
要实现“锚点命中即高亮”的效果，需借助 JavaScript 在页面加载时解析 URL 中的哈希值（#anchor），并手动为目标元素添加自定义类（如 .active），再配合 CSS 定义该类的样式。
✅ 推荐实现方案（现代、无依赖）
以下代码使用原生 JavaScript（无需 jQuery），兼容所有主流浏览器，建议放入 <script> 标签中（推荐置于 </body> 前或使用 DOMContentLoaded）：
document.addEventListener('DOMContentLoaded', () => {
const hash = window.location.hash;
if (hash) {
const targetId = hash.substring(1); // 移除 '#'
const targetEl = document.getElementById(targetId);
if (targetEl) {
targetEl.classList.add('active');
// 可选：确保焦点可访问性（尤其对键盘用户）
targetEl.setAttribute('tabindex', '-1');
targetEl.focus();
}
}
});? 配套 CSS 示例
/* 基础高亮样式（可根据设计调整） */
.active {
background-color: #f0f8ff;
padding: 1rem;
border-left: 4px solid #4a90e2;
box-shadow: inset 0 0 6px rgba(0,0,0,0.05);
}
/* 若需过渡动效（增强体验） */
.active {
transition: all 0.3s ease;
}⚠️ 注意事项与最佳实践
- ID 唯一性：确保 #anchor 对应的元素具有唯一 id 属性，否则 getElementById() 将仅匹配第一个。
- 延迟渲染场景：若目标元素由框架（如 React/Vue）动态生成，需在组件挂载后或使用 MutationObserver 延迟执行，或监听 hashchange 事件补充处理。
- SEO 与可访问性：添加 tabindex="-1" 并调用 .focus() 可确保键盘用户聚焦到锚点区域，提升无障碍体验；避免仅依赖视觉样式传达状态。
- 避免样式冲突：.active 是通用类名，建议结合命名空间（如 .section-active）或作用域（如 article#features.active）防止全局污染。
- 服务端渲染（SSR）提示：纯前端方案在 SSR 环境中仍有效，因哈希解析发生在客户端；若需首屏直出高亮，需服务端识别 # 后参数（不推荐，因哈希不发送至服务器）。
✅ 总结
原生 :active 无法响应 URL 锚点跳转后的持久状态，而通过 window.location.hash 解析 + classList.add() 是轻量、可靠、标准的解决方案。它不依赖第三方库，语义清晰，易于维护，并兼顾可访问性与渐进增强原则。将此逻辑封装为可复用函数（如 highlightAnchorOnLoad()），即可在多页项目中统一应用。
