如何根据当前URL为菜单<a>标签添加.active类？

需求 #

当菜单项的链接与当前页面URL匹配时，为其添加.active类以高亮显示。例如：访问https://mywebsite.it/explore-docs页面时，.link_expdocs需添加active类。

现有问题 #

已通过JavaScript实现功能，但代码冗余不符合最佳实践。尝试简化代码后出现两个问题：

• .link_home始终被添加active类（即使在其他页面）
• URL包含/account时，link_dashboard也会出现误匹配

无效的简化代码 #

document.addEventListener("DOMContentLoaded", function() {
  const links = document.querySelectorAll(".item_menu a");

  links.forEach(link => {
    if (window.location.href.indexOf(link.getAttribute("href")) > -1) {
      link.classList.add('active');
    }
  });
});

可用但冗余的原始代码 #

HTML结构 #

<!-- Vertical Navigation -->
<div class="vertical_nav">

  <!-- User Menu -->
  <div class="user_menu">
    <div class="wrap_user_navigation">
      <div class="user_navigation">
        <div class="item_menu">
          <a class="link_dashboard" href="https://mywebsite.it/account">Dashboard</a>
        </div>

        <div class="item_menu">
          <a class="link_ordini" href="https://mywebsite.it/orders">I miei ordini</a>
        </div>

        <div class="item_menu">
          <a class="link_downloads" href="https://mywebsite.it/downloads">Libreria Downloads</a>
        </div>

        <div class="item_menu">
          <a class="link_settings" href="https://mywebsite.it/settings">Impostazioni</a>
        </div>
      </div>  
    </div>  
  </div>

  <div class="main_menu">
    <div class="item_menu">
      <a class="link_home" href="https://mywebsite.it/">Home</a>
    </div>  

    <div class="item_menu">
      <a class="link_expdocs" href="https://mywebsite.it/explore-docs">Explore Docs</a>
    </div> 

    <div class="item_menu">
      <a class="link_coaching" href="https://mywebsite.it/services">Online Coaching</a>
    </div> 

    <div class="item_menu">
      <a class="link_calculator" href="https://mywebsite.it/math">Fitness Calculator</a>
    </div> 
  </div>

  <!-- Docs Menu -->
  <div class="doc_menu">
    <div class="item_menu">
      <a class="link_anadocs" href="https://mywebsite.it/docs-anatomy">Docs Anatomy</a>
    </div> 

    <div class="item_menu">
      <a class="link_evidence" href="https://mywebsite.it/evidence-based">Evidence Based</a>
    </div> 

    <div class="item_menu">
      <a class="link_strengthvalue" href="https://mywebsite.it/strength-value">Strength Value</a>
    </div> 

    <div class="item_menu">
      <a class="link_mission" href="https://mywebsite.it/mission">Mission</a>
    </div> 
  </div>

  <!-- Footer Items -->
  <div class="footer_menu">
    <div class="item_menu">
      <a class="link_support" href="https://mywebsite.it/supporto">Supporto</a>
    </div> 

    <div class="item_menu">
      <a class="link_logout" href="https://mywebsite.it/wp-login.php?action=logout">Logout</a>
    </div> 
  </div>

</div>

冗余的JavaScript代码 #

document.addEventListener("DOMContentLoaded", function() {

  // Add - Remove class active for user_menu
  if(window.location.href.indexOf("account") > -1) {
    document.querySelector(".link_dashboard").classList.add('active');
  } 
  if(window.location.href.indexOf("orders") > -1) {
    document.querySelector(".link_ordini").classList.add('active');
    document.querySelector(".link_dashboard").classList.remove('active');
  }   
  if(window.location.href.indexOf("downloads") > -1) {
    document.querySelector(".link_downloads").classList.add('active');
    document.querySelector(".link_dashboard").classList.remove('active');
  } 
  if(window.location.href.indexOf("settings") > -1) {
    document.querySelector(".link_settings").classList.add('active');
    document.querySelector(".link_dashboard").classList.remove('active');
  } 

  // Add - Remove class active for main_menu
  if(window.location.href === "https://mywebsite.it/") {
    document.querySelector(".link_home").classList.add('active');
  }
  if(window.location.href.indexOf("explore-docs") > -1) {
    document.querySelector(".link_expdocs").classList.add('active');
  }   
  if(window.location.href.indexOf("services") > -1) {
    document.querySelector(".link_coaching").classList.add('active');
  } 
  if(window.location.href.indexOf("math") > -1) {
    document.querySelector(".link_calculator").classList.add('active');
  }

  // Add - Remove class active for doc_menu
  if(window.location.href.indexOf("docs-anatomy") > -1) {
    document.querySelector(".link_anadocs").classList.add('active');
  } 
  if(window.location.href.indexOf("evidence-based") > -1) {
    document.querySelector(".link_evidence").classList.add('active');
  }   
  if(window.location.href.indexOf("strength-value") > -1) {
    document.querySelector(".link_strengthvalue").classList.add('active');
  } 
  if(window.location.href.indexOf("mission") > -1) {
    document.querySelector(".link_mission").classList.add('active');
  }
});

简洁的最佳实践实现 #

以下代码自动遍历所有菜单链接，无需手动维护每个类名和URL，同时解决误匹配问题：

document.addEventListener("DOMContentLoaded", function() {
  const currentPath = window.location.pathname;
  const links = document.querySelectorAll(".item_menu a");

  links.forEach(link => {
    // 提取链接的路径部分，避免域名干扰
    const linkPath = new URL(link.href).pathname;
    
    // 精确匹配路径
    const isMatch = currentPath === linkPath;

    if (isMatch) {
      // 先移除所有链接的active类，确保只有当前匹配项高亮
      links.forEach(l => l.classList.remove('active'));
      link.classList.add('active');
    }
  });
});

代码优势 #

• 自动适配：无需手动编写每个菜单项的匹配逻辑，新增菜单时无需修改JS代码
• 精确匹配：使用pathname对比，避免域名、参数等干扰，解决首页和account页面的误匹配问题
• 逻辑简洁：统一处理所有菜单链接，保证只有当前页面对应的菜单项高亮

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