基于URL为锚点添加active类异常：所有锚点均被添加该类求助

我完全懂你的困扰——本来只想给匹配当前URL的锚点加上active类，结果所有锚点都被标记了，这肯定是匹配逻辑出了问题。咱们来一步步搞定它：

问题根源分析 #

这种情况大多是因为你的匹配条件太宽泛了。比如如果只是用indexOf模糊检查当前URL是否包含锚点的href，可能所有锚点的href都带着URL里的公共前缀（比如/articles/），导致全部误匹配；或者反过来，你搞反了比对逻辑，去检查锚点href是否包含当前URL，这显然不对。

正确的实现方案 #

我们需要精准匹配当前页面路径和锚点的目标路径，而不是模糊的包含判断。这里有两种可靠的实现方式：

方式1：精确匹配完整路径（推荐） #

如果你的锚点href是完整的路径（比如/articles/2014），直接用路径名做精确比对，不会出错：

// 获取当前页面的路径部分（比如 "/articles/2014"）
const currentPath = window.location.pathname;

// 遍历所有锚点元素
document.querySelectorAll('a').forEach(link => {
  // 先移除所有锚点的active类，避免残留
  link.classList.remove('active');
  
  // 检查当前锚点的路径是否和页面路径完全一致
  if (link.pathname === currentPath) {
    link.classList.add('active');
  }
});

方式2：匹配URL中的动态片段（适合年份/ID类路径） #

如果你的URL结构是/articles/年份，只想匹配末尾的年份部分，可以提取URL最后一段来比对：

// 获取当前URL的最后一段（比如 "2014"）
const targetSegment = window.location.pathname.split('/').pop();

document.querySelectorAll('a').forEach(link => {
  link.classList.remove('active');
  
  // 检查锚点href是否包含目标片段
  if (link.href.includes(targetSegment)) {
    link.classList.add('active');
  }
});

额外注意事项 #

• 一定要先移除所有锚点的active类，再给匹配的添加，避免重复累加类名。
• 如果锚点用的是相对路径（比如2014而不是/articles/2014），可以用link.getAttribute('href')获取原始href值再做比对。
• 要是你用jQuery，逻辑完全一致，只是写法换成jQuery风格：

  const currentPath = window.location.pathname;
  $('a').removeClass('active').filter(function() {
    return $(this).attr('href') === currentPath;
  }).addClass('active');
  

这样修改后，当URL是http://localhost:49660/articles/2014时，只有对应路径的锚点会被加上active类，其他锚点不会被误标记。

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