本文详解如何在 Bootstrap 5 中正确高亮当前活动页面的导航菜单项（包括下拉菜单父项），通过 CSS 优先级控制与语义化类名组合，实现 .active 状态下的纯白背景与黑色文字效果。
本文详解如何在 bootstrap 5 中正确高亮当前活动页面的导航菜单项（包括下拉菜单父项），通过 css 优先级控制与语义化类名组合，实现 `.active` 状态下的纯白背景与黑色文字效果。
在 Bootstrap 5 中，.nav-link.active 默认继承自 navbar-light 的浅色主题样式，其背景色通常为半透明或继承自父容器（如 bg-info），导致即使添加了 active 类，视觉上也难以凸显。你遇到的问题——“悬停时变白，但激活态不变白”——本质是 CSS 选择器权重不足或作用目标不准确所致。
? 核心问题定位
- HTML 结构混淆：你在 <ul> 上同时使用了 navbar-nav 和 nav nav-tabs 类。nav-tabs 是专为选项卡设计的组件，自带独立的 .nav-link.active 样式逻辑，与 navbar-nav 的语义和样式体系冲突，应移除。
- CSS 选择器失效：原样式 .nav-tabs .nav-item .nav-link.active 无法命中，因为 HTML 中并不存在 .nav-tabs 容器；且 .nav-item .nav-link 是后代选择器，而实际结构中 .nav-link 是 .nav-item 的直接子元素，应改用子选择器 > 提升精度。
- Bootstrap 默认覆盖：Bootstrap 5 的 .navbar-light .nav-link.active 默认背景为 transparent，且 color 为 #000（已接近目标），但背景未显式设为 white，需强制覆盖。
✅ 正确解决方案（三步到位）
1. 清理冗余类名，规范结构
删除 <ul class="navbar-nav me-auto mb-2 mb-lg-0 nav nav-tabs"> 中的 nav nav-tabs，仅保留 navbar-nav：
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <!-- 所有 <li> 保持不变 --> </ul>
? 理由：nav-tabs 会引入额外的边框、底边线及垂直对齐逻辑，干扰 navbar 布局，且其 CSS 规则不适用于下拉式导航。
2. 精准定义 .active 样式（关键！）
将 <style> 块替换为以下高优先级规则（使用 !important 确保覆盖 Bootstrap 默认）：
<style>
/* 强制激活态：白色背景 + 黑色文字 + 无圆角干扰 */
.navbar-nav > .nav-item > .nav-link.active,
.navbar-nav > .nav-item > .nav-link.active.dropdown-toggle {
background-color: white !important;
color: #000 !important;
border-radius: 0.25rem; /* 可选：与 Bootstrap 按钮一致的圆角 */
}
/* 可选：增强悬停反馈（非必须，但推荐） */
.navbar-nav > .nav-item > .nav-link:hover {
background-color: #e9ecef !important; /* 浅灰悬停色，区别于白色激活态 */
}
</style>⚠️ 注意：.nav-link.active.dropdown-toggle 是为下拉菜单父项（如 “About Us”）单独声明的，因 PHP 动态添加的 active 类落在 <a> 标签上，而该标签同时带有 dropdown-toggle 类——必须显式包含，否则下拉父项无法生效。
3. 服务端/客户端激活逻辑双保险
你已在 PHP 中动态添加 active 类（推荐），但前端 JS 脚本存在严重缺陷：
❌ 错误代码（原文）：
$('.nav-item .nav-link[href="' + page + '"]').addClass('active');→ href="#" 的下拉父项永远匹配不到，导致“About Us”等父项无法激活。
✅ 修正方案（推荐纯前端，无需 PHP）：
<script>
document.addEventListener('DOMContentLoaded', function() {
const path = window.location.pathname;
const fileName = path.split('/').pop() || 'index.html';
// 匹配所有 nav-link，包括 href="#" 的下拉父项
document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
const href = link.getAttribute('href') || '';
// 若 href 是文件名（如 about_us.html）或以该文件名结尾（兼容子目录）
if (href === fileName || href.endsWith('/' + fileName)) {
link.classList.add('active');
} else if (link.classList.contains('dropdown-toggle')) {
// 对下拉父项：检查其 dropdown-menu 中是否有匹配项
const menu = link.nextElementSibling;
if (menu && menu.classList.contains('dropdown-menu')) {
const matchedChild = menu.querySelector(`.dropdown-item[href="${fileName}"]`);
if (matchedChild) link.classList.add('active');
}
}
});
});
</script>? 最终验证要点
- ✅ 当前页面为 about_us.html 时，“About Us” 菜单项背景为纯白，文字为黑；
- ✅ 点击“Sails & Trails Camp”下拉后，其父项同样保持白色背景；
- ✅ 鼠标悬停其他非激活项时，显示浅灰色背景（非白色），避免混淆；
- ✅ 移动端折叠菜单展开后，激活态样式依然生效。
? 总结
实现导航栏激活态高亮，关键不在“加 class”，而在精准控制 CSS 作用域与优先级。务必：
① 使用语义化类名（只用 navbar-nav，弃用 nav-tabs）；
② 用子选择器 > + !important 强制覆盖默认样式；
③ 对下拉父项的激活逻辑做特殊处理（PHP 判断或 JS 深度匹配）。
如此，即可稳定、可维护地实现专业级导航状态反馈。
