PHP引入公共侧边导航：如何通过JavaScript onclick函数设置链接激活状态？

你的核心问题在于：点击链接时触发的JS操作会被页面跳转打断。当你点击<a>标签时，浏览器会立即开始加载新页面，makeActive函数即使执行了，也只会在当前页面的DOM上生效一瞬间，新页面加载后侧边栏是重新渲染的，所有链接又回到了初始的normal类状态，所以你看不到active效果。

下面给你两种可靠的解决方案：

方案一：用PHP在页面加载时直接设置（推荐） #

既然你已经用PHP引入侧边栏，那完全可以在服务器端就根据当前页面URL给对应的链接加上active类，不需要前端JS，更稳定。

修改你的playersidenav.php代码如下：

<?php
// 获取当前页面的文件名（比如news.php、schedule.php）
$currentPage = basename($_SERVER['PHP_SELF']);
?>
<div class="column sidenav"> 
  <div class="row"> 
    <img src="../images/avatar.png" alt="Avatar"> 
    <h1 style="color:white;float:right;padding-top:7%">Hello John!</h1> 
  </div> 
  <a class="normal <?php echo $currentPage === 'news.php' ? 'active' : ''; ?>" href="news.php">NEWS</a> 
  <a class="normal <?php echo $currentPage === 'schedule.php' ? 'active' : ''; ?>" href="schedule.php">SCHEDULE</a> 
  <a class="normal <?php echo $currentPage === 'partners.php' ? 'active' : ''; ?>" href="partners.php">PARTNERS</a> 
  <a class="normal <?php echo $currentPage === 'coaches.php' ? 'active' : ''; ?>" href="coaches.php">COACHES</a> 
  <a class="normal <?php echo $currentPage === 'tournaments.php' ? 'active' : ''; ?>" href="tournaments.php">TOURNAMENTS</a> 
  <a class="normal <?php echo $currentPage === 'events.php' ? 'active' : ''; ?>" href="events.php">EVENTS</a> 
  <a class="normal <?php echo $currentPage === 'shops.php' ? 'active' : ''; ?>" href="shops.php">SHOPS</a> 
</div>

原理是：PHP通过$_SERVER['PHP_SELF']获取当前页面的路径，再用basename提取文件名，然后逐个判断每个链接的href是否匹配当前页面，匹配的话就给该链接添加active类。这样页面加载完成后，active状态直接就生效了，不管是点击链接还是直接输入URL访问都能正常显示。

方案二：用JS在页面加载后设置 #

如果你更倾向于前端方案，可以去掉onclick事件，改为在页面加载完成后根据当前URL自动设置active类：

1. 先移除侧边栏所有<a>标签的onclick="makeActive(event)"属性
2. 添加以下JS代码（可以放在侧边栏的末尾，或者页面的<script>标签里）：

window.addEventListener('load', function() {
  const currentPath = window.location.pathname;
  const navLinks = document.querySelectorAll('.sidenav a.normal');

  // 先移除所有链接的active类
  navLinks.forEach(link => link.classList.remove('active'));

  // 找到对应当前页面的链接并添加active类
  navLinks.forEach(link => {
    const linkHref = link.getAttribute('href');
    // 判断当前路径是否包含链接的href（适配相对路径）
    if (currentPath.includes(linkHref)) {
      link.classList.add('active');
    }
  });
});

这里用classList来操作类名，比直接拼接className更安全，避免出现多余空格或重复类名的问题。页面加载完成后，JS会自动匹配当前URL对应的链接并设置active状态。

为什么你的原JS函数不生效？ #

再次强调：当你点击<a>标签时，浏览器的默认行为是跳转页面，这个过程会中断当前页面的所有JS操作。你的makeActive函数可能刚执行到一半，页面就已经刷新了，新页面的DOM是全新的，之前的修改完全不会保留，所以你看不到任何效果。

内容的提问来源于stack exchange，提问作者Akila Ranasinghe