Bootstrap 5导航栏active状态无法高亮nav-link问题求助

问题描述 #

使用Bootstrap 5开发导航栏时，自定义的活跃状态（.nav-link.active）颜色样式无法生效。尝试将href改为#时点击能变色但无法跳转页面，手动给对应页面的nav-link添加.active类也无效果。

用户代码如下：

CSS代码 #

.nav-link {
    color: #666777;
    font-weight: 400;
}

.nav-link.active {
    color: red;
}

.nav-link:hover {
    color: #000;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="/styles.css" rel="stylesheet">
        <title>My Webpage</title>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="/index.html">My Webpage</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                      <a class="nav-link" href="/index.html">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="/about.html">About</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Hobby
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="/hobby/anime.html">Hobby1</a>
                        <a class="dropdown-item" href="/hobby/books.html">Hobby2</a>
                        <a class="dropdown-item" href="/hobby/vtubers.html">Hobby3</a>
                      </div>
                    </li>
                  </ul>
                </div>
              </nav>
        </header>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

解决方案 #

1. 修复Bootstrap版本不匹配问题 #

当前代码引用了Bootstrap 5的CSS，但JS部分用的是Bootstrap 4及对应jQuery/Popper版本，版本不一致导致功能异常。替换为Bootstrap 5的JS文件（Bootstrap 5不再依赖jQuery）：

<!-- 替换原有JS引用 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

同时，导航栏折叠按钮属性需改为Bootstrap 5格式：将data-toggle改为data-bs-toggle，data-target改为data-bs-target。

2. 调整.active类的位置 #

Bootstrap 5中，导航栏的活跃状态类.active需要直接添加到<a class="nav-link">标签上，而非其父元素<li class="nav-item">。修改后的示例：

<li class="nav-item">
  <a class="nav-link active" href="/index.html">Home <span class="sr-only">(current)</span></a>
</li>

3. 提升CSS选择器优先级 #

Bootstrap默认的.nav-link.active样式优先级可能高于自定义样式，可通过增加选择器权重来覆盖：

.navbar-nav .nav-link.active {
    color: red;
}

优先提升选择器层级（比如加上.navbar-nav前缀）而非使用!important，避免后续样式冲突。

4. 多页面自动维护活跃状态 #

对于多页面场景，可添加一段JS代码，根据当前页面URL自动为对应的nav-link添加.active类，无需手动在每个页面修改：

// 在页面末尾添加
document.addEventListener('DOMContentLoaded', function() {
  const currentPath = window.location.pathname;
  const navLinks = document.querySelectorAll('.nav-link');
  
  navLinks.forEach(link => {
    if (link.getAttribute('href') === currentPath) {
      link.classList.add('active');
      // 移除其他链接的active类
      navLinks.forEach(otherLink => {
        if (otherLink !== link) {
          otherLink.classList.remove('active');
        }
      });
    }
  });
});

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