导航栏active-link下划线页面跳转后始终高亮首个链接问题

你写的点击切换active-link类的JS逻辑仅在当前未跳转的页面临时生效：点击导航链接后会触发整页跳转，浏览器会卸载当前页面、重新加载目标页的DOM，之前通过JS临时修改的类名会全部丢失。
而你的公共导航栏模板里直接把active-link类硬编码写在了第一个导航项上，所以无论跳转到哪个页面，新页面加载完成后永远是第一个导航项带有激活样式。
你原来绑定的click事件里的类切换逻辑本质是无效的——类刚加上，页面就跳走了，修改根本不会留存。你写的CSS下划线样式逻辑没有问题，不需要调整，只要把active-link类正确绑定到当前页面对应的导航项即可。

推荐优先用模板层判断的方案，稳定性最高，不会出现样式闪烁：

• 模板匹配方案（推荐）
  先把第一个li上硬编码的active-link类删掉，在渲染模板时直接判断当前访问路径和导航链接是否匹配，匹配则给对应项加激活类。Django模板可以按如下方式修改：

  <div class="navbar-container py-0">
      <ul>
          {% url 'screen_1' screen.id as screen1_path %}
          <li class="nav-link {% if request.path == screen1_path %}active-link{% endif %}">
              <a class="mb-sm-1 mb-md-0 p-1 pr-3 fs-6" href="{{ screen1_path }}">
                  Screen 1
              </a>
              <div class="underline"></div>
          </li>
          {% url 'screen_2' screen_2.id as screen2_path %}
          <li class="nav-link {% if request.path == screen2_path %}active-link{% endif %}">
              <a class="mb-sm-1 mb-md-0 p-1 px-3 fs-6" href="{{ screen2_path }}">
                  Screen 2
              </a>
              <div class="underline"></div>
          </li>
          {% url 'screen_3' screen_3.id as screen3_path %}
          <li class="nav-link {% if request.path == screen3_path %}active-link{% endif %}">
              <a class="mb-sm-1 mb-md-0 p-1 px-3 fs-6" href="{{ screen3_path }}">
                  Screen 3
              </a>
              <div class="underline"></div>
          </li>
      </ul>
  </div>
  

  注意使用这个方案需要确保Django settings里已经开启了django.template.context_processors.request上下文处理器，模板里才能正常拿到request.path变量。这种方式在服务端渲染页面时就直接把激活类加对了，不需要前端额外控制，没有兼容问题。
• 前端JS判断方案
  如果不想改模板逻辑，可以把原来的点击切换类的JS删掉，改成页面加载完成后匹配当前路径给对应导航项加类：

  $(document).ready(function() {
      const currentPath = window.location.pathname;
      $('.nav-link').removeClass('active-link');
      $('.nav-link a').each(function() {
          if ($(this).attr('href') === currentPath) {
              $(this).closest('.nav-link').addClass('active-link');
          }
      });
  });
  

  用这个方案同样要先删掉模板里第一个li上硬编码的active-link类，否则默认高亮的问题还是会存在。

内容的提问来源于stack exchange，提问作者Max Will