如何通过JS为当前页面对应的锚点设置active类？

可行的JS代码（替换原index.js内容） #

// 创建并添加Link1锚点
let aElement1 = document.createElement("a");
aElement1.href = "a1link.html";
aElement1.innerHTML = "Link1";
document.body.appendChild(aElement1);

// 创建并添加Link2锚点
let aElement2 = document.createElement("a");
aElement2.href = "a2link.html";
aElement2.innerHTML = "Link2";
document.body.appendChild(aElement2);

// 获取当前页面文件名（适配file://协议）
const currentPage = window.location.pathname.split('/').pop();

// 遍历锚点，为当前页面对应的锚点添加active类
document.querySelectorAll('a').forEach(link => {
  const linkTarget = link.href.split('/').pop();
  if (linkTarget === currentPage) {
    link.classList.add('active');
  } else {
    link.classList.remove('active');
  }
});

逻辑说明 #

1. 修复if else判断失效问题：之前的错误多是因为未正确提取当前页面的核心文件名，这里通过split('/').pop()直接截取路径最后一段，避免本地路径前缀干扰，确保判断条件准确。
2. 解决click事件局限性：这段代码在页面加载时自动执行，不管是直接打开页面还是跳转刷新，都会立即完成锚点的active类匹配，无需依赖点击事件触发。
3. 适配file://协议：本地file://路径下，window.location.pathname会返回完整本地路径，通过拆分提取文件名的方式，能完美匹配锚点的href目标。

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