Bootstrap导航active类添加移除失效，求JS解决方案

问题描述 #

我需要为基于Bootstrap构建的导航栏<li>标签下的链接实现active类的添加与移除功能，但编写的JavaScript代码无法正常运行。

我的HTML代码 #

<div class="container-fluid">
  <div class="row flex-nowrap">
        <div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark " style="width: 250px;"> 
            <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> 
            <svg class="bi me-2" width="40" height="32"> </svg> <span class="fs-4">YooBudget</span> </a>
             <hr> 
             <ul class="nav nav-pills flex-column mb-auto"> 
              <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page"> <i class="fa fa-home"></i><span class="ms-2">Home</span> </a> </li>
              <li> <a href="#" class="nav-link text-white"> <i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span> </a> </li> 
              <li> <a href="#" class="nav-link text-white"> <i class="fa fa-first-order"></i><span class="ms-2">My Orders</span> </a> </li> 
              <li> <a href="#" class="nav-link text-white"> <i class="fa fa-cog"></i><span class="ms-2">Settings</span> </a> </li> 
              <li> <a href="#" class="nav-link text-white"> <i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span> </a> </li> </ul> 
              <hr> 
              <div class="dropdown"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> <strong> John W </strong> </a> 
              <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1"> <li><a class="dropdown-item" href="#">New project</a></li> 
              <li><a class="dropdown-item" href="#">Settings</a></li> <li><a class="dropdown-item" href="#">Profile</a></li> 
              <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Sign out</a></li> </ul> </div>
        </div>
</div>
</div>

我的JavaScript代码（无法正常运行） #

const navLinkEls = document.querySelectorAll('.nav-link');

navLinkEls.forEach(navLinkEl => {
    navLinkEl.addEventListener('click', ()=> {
        if(document.querySelector('.active')) {
            classList.remove('active');
        }
        navLinkEl.classList.add('active');

    });

});

错误原因 #

原代码中classList.remove('active')没有指定操作的DOM元素，必须先获取到带有active类的元素，再调用其classList.remove方法。此外，只移除第一个匹配元素的active类可能存在遗漏，同时没有处理链接的默认跳转行为。

修正后的JavaScript代码 #

const navLinkEls = document.querySelectorAll('.nav-link');

navLinkEls.forEach(navLinkEl => {
    navLinkEl.addEventListener('click', (e) => {
        // 阻止点击链接时的默认跳转行为（按需保留/移除）
        e.preventDefault();
        
        // 移除所有导航链接的active类和无障碍属性
        navLinkEls.forEach(el => {
            el.classList.remove('active');
            el.removeAttribute('aria-current');
        });
        
        // 为当前点击的链接添加active类和无障碍属性
        navLinkEl.classList.add('active');
        navLinkEl.setAttribute('aria-current', 'page');
    });
});

关键改进点 #

• 明确操作对象：遍历所有nav-link元素移除active类，确保不会残留多个active状态
• 处理默认行为：添加e.preventDefault()避免页面跳转到顶部（如果需要保留跳转功能可删除该行）
• 符合无障碍规范：同步更新aria-current属性，匹配Bootstrap的设计标准

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