本文详解如何在 Bootstrap 5 中正确高亮当前页面对应的导航菜单项（包括下拉菜单父项），通过精准添加 active 类并配合自定义 CSS，实现活动项背景色为白色、文字清晰可读的视觉效果。
本文详解如何在 bootstrap 5 中正确高亮当前页面对应的导航菜单项（包括下拉菜单父项），通过精准添加 `active` 类并配合自定义 css，实现活动项背景色为白色、文字清晰可读的视觉效果。
在 Bootstrap 5 中，.nav-link.active 样式默认继承自其父组件（如 .nav-tabs 或 .navbar-nav）的样式规则。但问题代码中存在两个关键误区：一是错误地将 .nav-tabs 类直接嵌套在 .navbar-nav 内部（Bootstrap 5 不推荐混用 .navbar-nav 与 .nav-tabs 布局逻辑）；二是 CSS 选择器层级不匹配——.nav-tabs .nav-item .nav-link.active 无法命中实际 DOM 结构，因为导航栏并未真正使用 .nav-tabs 的语义化结构，而只是借用了部分类名。
要实现「当前页面对应菜单项（含下拉父项）显示白色背景」，需遵循以下三步原则：
✅ 正确添加 active 类（服务端 + 客户端双保险）
PHP 动态判断当前页面并注入 active 类是可靠的基础方案（如原代码所示）。注意：active 类必须直接作用于 <a> 标签本身，且应置于其他类之前以确保 CSS 优先级可控：
<!-- 正确写法：active 类紧邻 nav-link，避免被覆盖 --> <a class="nav-link dropdown-toggle text-dark <?php echo ($activePage === 'about_us.html') ? 'active' : ''; ?>" href="#" role="button" data-bs-toggle="dropdown">About Us</a>
⚠️ 注意：原答案中重复写 class="active nav-link..." 是冗余的——PHP 已动态输出 active，无需手动再写一次。
✅ 编写精准、高优先级的自定义 CSS
Bootstrap 5 默认对 .nav-link.active 的背景设为 transparent（尤其在 navbar-light 下）。因此必须用更具体的选择器强制覆盖：
<style>
/* 关键：提高选择器特异性，确保生效 */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:hover,
.navbar-nav .nav-link.active:focus {
background-color: white !important;
color: #000 !important;
border-radius: 4px; /* 可选：增加圆角提升美观度 */
}
/* 针对下拉菜单展开时的父项高亮（可选增强） */
.navbar-nav .nav-item.show .nav-link,
.navbar-nav .nav-item.show .nav-link:hover {
background-color: white !important;
color: #000 !important;
}
</style>✅ 说明：
- 使用 .navbar-nav .nav-link.active 直接定位到导航链接，而非错误的 .nav-tabs .nav-item...
- !important 在教程初期可确保快速生效（上线前建议通过更优选择器替代）
- 同时定义 :hover 和 :focus 状态，保证交互一致性
✅ 移除冲突类，保持结构语义清晰
原代码中 <ul class="navbar-nav ... nav nav-tabs"> 混用了 .navbar-nav（用于顶部导航）和 .nav-tabs（用于选项卡式切换），二者设计目的不同，CSS 规则互相干扰。应删除 nav nav-tabs，仅保留 Bootstrap 推荐的 navbar 结构：
<!-- ✅ 修正后：移除冗余的 nav-tabs --> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <!-- 所有 <li> 子项保持不变 --> </ul>
? 完整验证示例（精简版）
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="#">QSC</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-dark <?php echo in_array($activePage, ['about_us.html', 'contact_us.html']) ? 'active' : ''; ?>"
href="#" data-bs-toggle="dropdown">About Us</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="about_us.html">About Us/History</a></li>
<li><a class="dropdown-item" href="contact_us.html">Contact Us</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-dark <?php echo ($activePage === 'openwater.html') ? 'active' : ''; ?>"
href="openwater.html">Open Water Swimming</a>
</li>
</ul>
</div>
</div>
</nav>
<style>
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:hover,
.navbar-nav .nav-link.active:focus {
background-color: white !important;
color: #000 !important;
}
</style>? 总结
- 核心逻辑：active 类必须由服务端（PHP）或客户端（JS）准确添加到当前页面对应的 <a> 标签上；
- 样式关键：使用 .navbar-nav .nav-link.active 而非 .nav-tabs 相关选择器，并用 !important 快速验证（后期可优化为 BEM 或更高特异性）；
- 结构规范：避免在 navbar 中混用 .nav-tabs，保持语义清晰、样式解耦；
- 兼容下拉项：对多级菜单，需将 active 判断逻辑扩展至所有相关子页面（如 about_us.html 和 contact_us.html 同属 About Us 下拉组）。
按此方案调整后，无论用户访问哪个子页面，其所属导航父项均将以白色背景+黑色文字高亮显示，体验专业且符合 Bootstrap 5 最佳实践。
