求实现导航栏激活状态的原生JavaScript解决方案

嗨，我来帮你搞定这个原生JS实现导航栏激活状态的问题～你之前的代码思路是对的，但几个小细节没处理好，导致它没法正常工作，比如for...in遍历数组的方式不太合适、this的指向不对，还有没正确选中要操作的导航元素。我给你调整了代码，顺便拆解下每一步的逻辑：

调整后的完整代码 #

HTML部分

我稍微修改了链接的href，让它和你定义的页面关键词对应上，这样测试起来更准确：

<nav>
  <ul class="topnav" id="myTopnav">
      <li class="nav-item">
        <a class="nav-link" href="/logos">Logos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/sketches">Sketches</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/fotos">Fotos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/tutorials">Tutorials</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/kontakt">Kontakt</a>
      </li>
  </ul>
</nav>

CSS部分

保持你原来的样式就行，激活状态的下划线效果很清晰：

* {
  text-decoration: none;
  list-style-type: none;
  float: left;
  padding: 10px;
}

.active {
  border-bottom: 2px solid blue;
}

JavaScript部分

这是核心修正的地方，我把逻辑梳理得更清晰了：

"use strict";

window.onload = function() {
  // 获取当前页面的路径（比如 /logos 或者 /sketches.html）
  const pathname = window.location.pathname;
  // 获取所有导航链接元素
  const navLinks = document.querySelectorAll('.nav-link');

  // 遍历每个导航链接
  navLinks.forEach(link => {
    // 先统一移除所有激活状态，避免多个元素同时带active类
    link.classList.remove('active');
    
    // 这里分两种情况适配不同的页面路径：
    // 情况1：如果你的路径是类似 /logos 的路由形式
    const pageKey = link.getAttribute('href').slice(1); // 取出 href 里的关键词，比如 logos
    // 情况2：如果是静态HTML文件（比如 logos.html），可以用下面这行替换上面的pageKey
    // const pageKey = link.textContent.toLowerCase(); // 取出链接文本转小写，比如 logos

    // 检查当前页面路径是否包含这个关键词
    if (pathname.includes(pageKey)) {
      // 匹配成功，给当前链接添加激活类
      link.classList.add('active');
    }
  });
}

逻辑说明 #

1. 首先用document.querySelectorAll('.nav-link')拿到所有导航链接，这样能直接操作每个链接元素；
2. 遍历的时候先统一移除所有active类，这一步很重要，防止切换页面后多个导航项同时处于激活状态；
3. 根据你的页面路径类型选择对应的匹配方式：如果是路由形式就取href里的关键词，如果是静态HTML文件就用链接文本转小写来匹配；
4. 最后判断当前页面路径是否包含这个关键词，匹配上就给链接加上active类。

这样改完之后，导航栏的激活状态就能正常工作啦～

备注：内容来源于stack exchange，提问作者Malte K