JavaScript onclick事件失效 动态导航点击切换active类异常

核心失效原因 #

• 逻辑本质错误：你的站点是传统PHP多页架构，不是单页应用，点击a标签会触发整页跳转刷新，你写的click事件刚修改完class，浏览器就已经开始加载新页面，之前修改的DOM状态会被完全重置，根本不会保留。
• HTML结构违规：<li> 标签的合法父元素只能是<ul>/<ol>/<menu>，你直接用div#header-page包裹li，浏览器会自动修正DOM结构，很容易出现选择器匹配不到元素的问题。
• CSS样式错位：底部边框样式是定义在#header-page li选择器上的，你给a标签加active类时，仅a标签的文字颜色可能生效，li的底部边框完全不会触发高亮。
• PHP代码漏洞：href拼接处的<?php if($page_status=='true')?>没有完整的判断输出逻辑，会导致href属性渲染异常，可能出现链接跳转错误。
• 事件逻辑冗余：你写的click事件里先全量移除active类，再用toggleClass完全多此一举，已经清空所有active状态的前提下，直接给当前元素加类即可，用toggle反而可能在重复点击时异常移除类。

分步修复方案 #

第一步：修正HTML结构与PHP渲染逻辑 #

把包裹li的div换成合法的ul标签，修复href拼接错误，统一导航样式类：

<div class="collapse navbar-collapse" id="navbarCollapse">
  <div class="navbar-nav ms-auto p-4 p-lg-0">
    <!-- div替换为ul，符合HTML规范 -->
    <ul class="header" id="header-page">
      <?php
        // 兼容无id参数的首页场景
        $id = isset($_GET['id']) ? intval($_GET['id']) : 0;
        $homeActive = ($id === 0) ? 'active' : '';
      ?>
      <!-- 首页链接统一加导航类，保持样式一致 -->
      <li class="<?php echo $homeActive; ?>">
        <a class="mx-2 nav-item nav-link" href="index.php">首页</a>
      </li>
      <?php
        $qry = "SELECT * FROM tbl_menu where visibility_status=0 order by position_order ASC ";                
        $result = mysqli_query($connectiondb, $qry); 
        while($row = mysqli_fetch_array($result)) {
          $link = $row['page_link'] . "?id=" . $row['id'];
      ?>
      <li>
        <a class="mx-2 nav-item nav-link" href="<?php echo $link; ?>"><?php echo $row['page_name'];?></a>
      </li>
      <?php } ?>  
    </ul>   
  </div>  
</div>

第二步：修正CSS样式 #

把高亮状态绑定到li标签上，让边框和文字颜色同步生效，同时重置a标签默认颜色避免样式冲突：

/*** 导航页高亮样式 ***/
#header-page li {
  display: inline-block;
  font-weight: 500;
  color: var(--dark);
  cursor: pointer;
  transition: .5s;
  border-bottom: 5px solid transparent;
} 

#header-page li:hover,
#header-page li.active {
  color: var(--primary);
  border-color: var(--primary);
}
/* 链接继承父级li的文字颜色，覆盖a标签默认样式 */
#header-page li a {
  color: inherit;
  text-decoration: none;
}

第三步：实现active类自动添加（二选一即可，优先选方案1） #

方案1：后端渲染直接加类（最稳定，无兼容问题）

多页站点最稳妥的实现方式是在PHP渲染阶段就判断当前页面对应的菜单项，直接输出active类，完全不需要依赖JS：

<li class="<?php echo $homeActive; ?>">
  <a class="mx-2 nav-item nav-link" href="index.php">首页</a>
</li>
<?php
  $id = isset($_GET['id']) ? intval($_GET['id']) : 0;
  $qry = "SELECT * FROM tbl_menu where visibility_status=0 order by position_order ASC ";                
  $result = mysqli_query($connectiondb, $qry); 
  while($row = mysqli_fetch_array($result)) {
    $link = $row['page_link'] . "?id=" . $row['id'];
    // 判断当前菜单id和url参数id是否一致，一致则加active
    $itemActive = ($id == $row['id']) ? 'active' : '';
?>
<li class="<?php echo $itemActive; ?>">
  <a class="mx-2 nav-item nav-link" href="<?php echo $link; ?>"><?php echo $row['page_name'];?></a>
</li>
<?php } ?>

方案2：前端JS匹配URL加类

如果不想修改后端逻辑，就放弃click事件绑定逻辑，改成页面加载完成后，自动匹配当前URL和导航链接，给对应菜单项加active：

$(function() {
  // 拼接当前页面的路径+参数
  const currentUrl = window.location.pathname + window.location.search;
  $('#header-page li').removeClass('active');
  $('#header-page li').each(function() {
    const linkHref = $(this).find('a').attr('href');
    // 兼容路径前后斜杠的格式差异
    const formatCurrent = currentUrl.replace(/^\/|\/$/g, '');
    const formatLink = linkHref.replace(/^\/|\/$/g, '');
    if (formatCurrent === formatLink) {
      $(this).addClass('active');
    }
  });
});

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