如何修改与当前页面URL中#anchor匹配的右侧边栏链接的CSS样式

原有代码问题排查 #

• 语法错误：原有JS代码结尾存在括号错位问题，语法不合法无法执行
• 匹配逻辑错误：侧边栏的锚点链接通常仅携带#xxx格式的哈希值，而非完整页面URL，用完整document.URL匹配不到对应元素
• 缺少动态监听逻辑：用户点击页面内锚点跳转、哈希值变化时，不会自动更新高亮状态

可行实现方案 #

1. JS 代码 #

// 高亮当前锚点对应侧边栏链接的函数
function highlightCurrentAnchorLink() {
  // 先移除所有已有高亮的链接样式
  document.querySelectorAll('.current-link').forEach(link => {
    link.classList.remove('current-link');
  });
  // 无锚点时直接终止逻辑
  if (!location.hash) return;
  // 如仅需匹配侧边栏内的链接，可把选择器修改为对应侧边栏容器的选择器，例如 .on-this-page a[href="${location.hash}"]
  const targetLinks = document.querySelectorAll(`a[href="${location.hash}"]`);
  targetLinks.forEach(link => {
    link.classList.add('current-link');
  });
}

// 页面加载完成后执行一次高亮逻辑
document.addEventListener('DOMContentLoaded', highlightCurrentAnchorLink);
// 监听锚点变化，动态更新高亮状态
window.addEventListener('hashchange', highlightCurrentAnchorLink);

2. CSS 代码 #

/* 可在类名前加上侧边栏容器选择器提高样式优先级，避免被原有样式覆盖 */
.current-link {
  color: green;
  /* 如样式仍被覆盖，可加 !important 强制生效：color: green !important; */
}

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