如何从外部页面点击链接时为<a>锚点添加CSS :active类？

当用户从外部页面通过带锚点的URL（如https://example.com/#anchor）进入你的页面时，你可以通过以下步骤为目标锚点元素添加类似:active的高亮状态：

核心思路 #

页面加载完成后，读取URL中的哈希值（即#后面的部分），定位到对应的DOM元素，为其添加自定义的高亮类（不建议直接依赖:active伪类，因为它仅在元素被点击瞬间生效，页面加载后无法直接触发）。

具体实现 #

1. 定义自定义高亮样式
   在CSS中创建一个类，模拟:active的视觉效果：

/* 自定义高亮类，可根据需求调整样式 */
.anchor-highlight {
  background-color: #e3f2fd;
  border-radius: 4px;
  outline: 2px solid #2196f3;
  transition: all 0.3s ease;
}

2. 页面加载时检测哈希并添加高亮
   使用JavaScript在页面加载完成后处理哈希值：

document.addEventListener('DOMContentLoaded', function() {
  const hash = window.location.hash;
  // 确保哈希值有效且对应存在的元素
  if (hash && hash.startsWith('#')) {
    const targetElement = document.querySelector(hash);
    if (targetElement) {
      // 添加高亮类
      targetElement.classList.add('anchor-highlight');
      // 可选：延迟移除高亮，让效果更持久（比如2秒）
      setTimeout(() => {
        targetElement.classList.remove('anchor-highlight');
      }, 2000);
      
      // 可选：如果需要平滑滚动到锚点（覆盖浏览器默认滚动）
      targetElement.scrollIntoView({ behavior: 'smooth' });
    }
  }
});

注意事项 #

• 若你坚持要使用:active伪类，由于它是浏览器的原生交互状态，无法通过JS直接设置，但可以用自定义类模拟其样式，效果完全一致且更易控制。
• 确保锚点对应的元素ID与URL哈希值完全匹配（区分大小写）。
• 平滑滚动的scrollIntoView是可选配置，可根据页面需求决定是否启用。

内容的提问来源于stack exchange，提问作者eip618