Bootstrap 5 默认不自动为当前页面的导航链接添加 .active 类，需手动设置或结合 JavaScript 动态管理；同时需确保引入的是 Bootstrap 5 官方 JS/CSS 资源，避免混用 v4 版本导致行为异常。
bootstrap 5 默认不自动为当前页面的导航链接添加 `.active` 类，需手动设置或结合 javascript 动态管理；同时需确保引入的是 bootstrap 5 官方 js/css 资源，避免混用 v4 版本导致行为异常。
在 Bootstrap 5 中，导航栏（navbar）的 active 状态不会自动根据当前 URL 更新——它完全依赖开发者显式控制：要么在服务端/静态页中为对应 <a></a> 标签手动添加 .active 类，要么通过客户端 JavaScript 动态匹配并高亮当前路径。你遇到的问题根源有二：一是 HTML 中错误引用了 Bootstrap 4 的 CDN 链接（含 data-toggle、jQuery 依赖等已废弃特性），二是 CSS 选择器逻辑虽正确，但 .nav-link.active 未真正生效——因为 <a></a> 标签本身没有 active 类，仅其父级 <li class="nav-item active"> 拥有。
✅ 正确做法如下：
1. 使用 Bootstrap 5 官方资源（关键！）
移除所有 Bootstrap 4 兼容代码（如 data-toggle、jQuery、popper.js v2），改用 Bootstrap 5 原生的 data-bs-* 属性和模块化 JS：
<!-- ✅ Bootstrap 5 正确 CDN（CSS + JS） --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
⚠️ 注意：Bootstrap 5 已移除 jQuery 依赖，
data-toggle应改为data-bs-toggle，且下拉菜单等交互由bootstrap.bundle.min.js（含 Popper）原生支持。
2. 手动设置 .active 类（静态站点推荐）
在每个 HTML 页面中，将对应导航项的 <a></a> 标签直接添加 active 类，并移除 <li> 上的冗余 active（Bootstrap 5 推荐将 active 放在 <a></a> 上）：
<!-- 在 /index.html 中 --> <li class="nav-item"> <a class="nav-link active" href="/index.html">Home <span class="visually-hidden">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="/about.html">About</a> </li>
你的 CSS 已正确：
.nav-link.active {
color: red !important; /* 加 !important 确保覆盖 Bootstrap 默认样式 */
}? 提示：
.visually-hidden替代了旧版.sr-only，语义更规范。
3. 动态高亮（单页应用或需要自动化时）
若页面较多，可用轻量 JavaScript 自动匹配当前路径并激活：
<script>
document.addEventListener('DOMContentLoaded', function() {
const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
navLinks.forEach(link => {
// 支持子路径匹配（如 /hobby/anime.html → /hobby/）
if (link.getAttribute('href') === currentPath ||
currentPath.startsWith(link.getAttribute('href') + '/') ||
(link.getAttribute('href') === '/' && currentPath === '/index.html')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});
</script>4. 下拉菜单中的激活项处理
下拉项（.dropdown-item）同样需手动添加 active 类：
<a class="dropdown-item active" href="/hobby/anime.html">Hobby1</a>
并补充 CSS（可选）：
.dropdown-item.active {
background-color: #0d6efd;
color: white;
}总结
- ❌ 不要混用 Bootstrap 4 和 5 的资源与属性；
- ✅
active类必须加在<a class="nav-link"></a>上（非<li>），CSS 才能命中.nav-link.active； - ✅ 静态站推荐手动维护；动态场景用 JS 路径匹配；
- ✅ 始终使用
bootstrap.bundle.min.js（含 Popper），禁用 jQuery。
遵循以上步骤，即可稳定、语义化地实现 Bootstrap 5 导航高亮，无需 hack 或降级兼容。
