如何在菜单栏中实现列表元素active激活状态的切换功能

提供两种适配不同场景的实现方案，可按需选择： #

方案1：PHP服务端渲染实现（推荐，适配你的.php页面场景） #

服务端渲染导航时直接匹配当前访问路径添加激活类，不会出现前端样式闪跳的问题。
首先在导航栏公共代码的顶部添加这段PHP逻辑：

<?php
// 提取当前访问路径的纯文件名，自动过滤URL参数
$current_route = basename(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH));
?>

然后修改你的导航栏HTML代码，删掉硬编码的nav__link--active类，改为动态判断输出：

<div class="nav-section">
  <div class="nav-section__header">
    <h2 class="nav-section__title"> Heading </h2>
  </div>
  <ul class="nav">
    <li class="nav__item">
      <a class="nav__link <?php if($current_route == 'main1.php') echo 'nav__link--active' ?>" href="../home/main1.php">
        <span class="channel-link__icon"></span>
        <span class="channel-link__element">Title1</span>
      </a>
    </li>
    <li class="nav__item">
      <a class="nav__link <?php if($current_route == 'main2.php') echo 'nav__link--active' ?>" href="../home/main2.php">
        <span class="channel-link__icon"></span>
        <span class="channel-link__element">Title2</span>
      </a>
    </li>
  </ul>
</div>

方案2：原生JS前端实现 #

如果不想修改后端代码，可通过前端JS在页面加载完成后自动匹配路径设置激活类：
首先先把现有HTML中两个a标签上硬编码的nav__link--active类全部删除，保持默认只有nav__link类。
然后在页面末尾</body>标签前添加这段JS代码：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有导航链接元素
  const navLinks = document.querySelectorAll('.nav__link');
  // 遍历匹配当前页面路径
  navLinks.forEach(link => {
    const linkFileName = link.getAttribute('href').split('/').pop();
    const currentFileName = window.location.pathname.split('/').pop();
    // 匹配成功添加激活类，否则移除
    if(linkFileName === currentFileName) {
      link.classList.add('nav__link--active');
    } else {
      link.classList.remove('nav__link--active');
    }
  })
})

内容的提问来源于stack exchange，提问作者XNIPER DAD