如何在Bootstrap 5导航栏中高亮当前页？点击标签不高亮如何解决？

你之前的所有方案失效的核心原因有两点：

• 你的导航链接是带跳转属性的，点击后页面会重新加载，点击事件里给元素加的active类会被重置，页面恢复到服务端初始渲染的状态（默认Home带active）
• 你写的jQuery代码本身存在逻辑错误：$(".nav-link").find(".active")是查找.nav-link子元素中带active类的节点，但active类是直接加在.nav-link元素本身的，所以永远找不到目标，无法移除旧的激活状态。

推荐优先用服务端渲染的方案，稳定性最高，不需要依赖前端JS执行：

方案1：PHP服务端渲染时直接添加active类 #

在你的account.php中读取URL的q参数，直接给对应导航项输出active类即可：

<?php
// 读取当前URL的q参数，默认值为1（对应Home页）
$current_tab = isset($_GET['q']) ? intval($_GET['q']) : 1;
?>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
  <li class="nav-item">
    <a class="nav-link <?php echo $current_tab == 1 ? 'active' : ''; ?>" aria-current="page" href="account.php?q=1">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link <?php echo $current_tab == 2 ? 'active' : ''; ?>" href="account.php?q=2">History</a>
  </li>
  <li class="nav-item">
    <a class="nav-link <?php echo $current_tab == 3 ? 'active' : ''; ?>" href="account.php?q=3">Ranking</a>
  </li>
</ul>

方案2：前端JS实现（无需修改服务端代码） #

不要绑定点击事件，改为页面加载完成后，根据当前URL参数给对应导航加激活状态：

document.addEventListener('DOMContentLoaded', function() {
  // 获取当前URL的q参数
  const query = new URLSearchParams(window.location.search);
  const current_q = query.get('q') || '1';
  // 清空所有导航的激活状态
  const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
  navLinks.forEach(link => {
    link.classList.remove('active');
    link.removeAttribute('aria-current');
  });
  // 给当前匹配的导航加激活状态
  const activeLink = document.querySelector(`.nav-link[href="account.php?q=${current_q}"]`);
  if (activeLink) {
    activeLink.classList.add('active');
    activeLink.setAttribute('aria-current', 'page');
  }
});

内容的提问来源于stack exchange，提问作者Mohammad Saif Khan