点击链接后jQuery导航切换active类失效问题求助

你的问题根源在于两个关键点：一是原脚本用event.preventDefault()阻止了链接跳转，导致类切换仅在当前页面临时生效却无法正常导航；二是页面刷新或跳转后，服务器渲染的初始HTML里类是固定的，没有根据当前URL动态调整。下面给你纯jQuery的解决方案：

核心思路 #

页面加载时根据当前URL自动匹配对应的导航链接，设置active类，其他链接设为inactive；同时移除阻止跳转的代码，让链接正常导航，新页面加载时重复这个逻辑即可保持类的正确状态。

完整jQuery代码 #

$(document).ready(function() {
  // 1. 页面加载时，根据当前URL设置Active类
  var currentPath = window.location.pathname;
  
  $('#sidebar .nav-link').each(function() {
    // 解析链接的路径（兼容完整URL和相对路径）
    var linkUrl = new URL($(this).attr('href'), window.location.origin);
    var linkPath = linkUrl.pathname;
    
    // 精确匹配当前路径和链接路径
    if (currentPath === linkPath) {
      $(this).removeClass('inactive').addClass('active');
    } else {
      $(this).removeClass('active').addClass('inactive');
    }
  });

  // 2. 点击链接时的即时类切换（可选，提升用户体验）
  $('#sidebar').on('click', '.nav-link', function() {
    // 清除所有链接的active类，设置为inactive
    $('#sidebar .nav-link.active').removeClass('active').addClass('inactive');
    // 给当前点击的链接设置active
    $(this).removeClass('inactive').addClass('active');
    // 不要阻止默认跳转，让页面正常导航到目标URL
  });
});

为什么原脚本失效？ #

• event.preventDefault()会阻止链接的跳转行为，导致你看到类切换后页面没变化，但刷新后又回到初始状态。移除这个方法后，链接会正常跳转，新页面加载时上面的代码会自动重新匹配URL设置类。
• 登录后重定向到第一个页面时，该页面加载时会自动匹配到对应链接，设置active类，完全符合你的需求。

注意事项 #

• 如果你的Laravel路由包含参数（比如/user/{id}），可以调整匹配逻辑为currentPath.startsWith(linkPath)，避免精确匹配失效。
• 确保所有导航链接的href属性是正确的（不管是相对路径还是完整URL，代码里的new URL都能正确解析路径）。

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