跳转至其他HTML页面后如何为对应导航li元素添加active类

• 类名拼接语法错误：this.className += 'active' 缺少前置空格，会导致类名和原有类名直接拼接为无效类名（如原有类为item会变成itemactive，无法匹配.active样式规则）
• 事件绑定逻辑错误：跳转事件被放在循环体内执行，每轮循环都会给li[0]、li[1]重复绑定事件，最终两个元素会被绑定4次类修改事件+4次跳转事件，逻辑混乱
• 页面跳转特性：location.href触发页面跳转后，当前页面DOM会立即销毁，就算类名修改成功，要么来不及渲染到页面，要么跳转后新页面的DOM是全新的，原有页面的类修改不会被带到新页面（你是多页面站点，每个页面的导航DOM都是独立的）

方案1：合并点击逻辑，延迟跳转（适合需要点击后先显示激活状态再跳转的场景） #

不要拆分事件绑定，把类修改和跳转写在同一个点击回调里，同时调整类名操作逻辑：

let li = document.querySelectorAll('header ul li');
// 导航项和目标页面的映射关系，直接配置不需要循环里重复绑定
const pageMap = [
  'index.html', // 第一个li对应主页
  'page2.html', // 第二个li对应page2
  'page3.html', // 第三个li对应page3
  'page4.html'  // 第四个li对应page4
]

for(let i=0; i<li.length; i++){
  li[i].addEventListener('click', function(){
    // 先修改类名
    let active = document.querySelector('.active');
    active.classList.remove('active');
    this.classList.add('active');
    // 延迟100ms跳转，保证类修改的渲染生效
    setTimeout(() => {
      location.href = pageMap[i]
    }, 100)
  })
}

方案2：多页面站点最优方案（推荐） #

因为你是独立HTML的多页面站点，跳转后页面会刷新，点击时的类修改本身就不会保留到新页面，更合理的做法是每个页面初始化时直接给对应导航项加active类，不需要靠点击事件修改：

各页面通用JS： #

// 每个页面加载完成后自动给对应导航加active
// 先获取当前页面的文件名
const currentPage = location.pathname.split('/').pop() || 'index.html';
const pageMap = {
  'index.html': 0,
  'page2.html': 1,
  'page3.html': 2,
  'page4.html': 3
}
const li = document.querySelectorAll('header ul li');
// 移除所有active
li.forEach(item => item.classList.remove('active'));
// 给当前页面对应的li加active
if(pageMap[currentPage] !== undefined) {
  li[pageMap[currentPage]].classList.add('active')
}

导航跳转可以直接用a标签实现，不需要绑定点击事件： #

<header>
    <ul>
        <li><a href="index.html">主页</a></li>
        <li><a href="page2.html">page2</a></li>
        <li><a href="page3.html">page3</a></li>
        <li><a href="page4.html">page4</a></li>
    </ul>
</header>

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