如何解决e.preventDefault()阻止a标签跳转与li添加active类的冲突问题

我完全懂你的困扰——点击导航项时想给对应<li>加上active类高亮，但加了e.preventDefault()就阻止了页面跳转，去掉它虽然能跳转，可刷新后高亮状态直接没了。这是因为页面跳转后会重新加载整个页面，之前前端DOM操作的状态会全部重置，所以不能只在点击时处理高亮，必须在每个页面加载完成后，根据当前URL自动匹配并设置active状态。

解决方案步骤： #

• 移除点击事件里的e.preventDefault()，确保导航链接能正常跳转
• 新增页面加载时的逻辑：获取当前页面的URL路径，匹配对应的导航链接，给它的父级<li>添加active类，同时移除其他<li>的active类

修改后的完整jQuery代码： #

$(document).ready(function() {
    // 页面加载完成后，根据当前URL自动设置active状态
    var currentPagePath = window.location.pathname;
    $('.nav.navbar-nav li a').each(function() {
        var linkHref = $(this).attr('href');
        // 匹配当前页面路径与导航链接的href（适配不同服务器路径场景）
        if (currentPagePath.includes(linkHref)) {
            $(this).closest('ul').find('li').removeClass('active');
            $(this).parent('li').addClass('active');
            return false; // 找到匹配项后停止遍历，提升效率
        }
    });

    // 点击导航项时的即时高亮（可选，给用户点击反馈）
    $(document).on('click', '.nav.navbar-nav li', function() {
        $(this).closest('ul').find('li').removeClass('active');
        $(this).addClass('active');
        // 这里不再阻止跳转，让页面正常导航
    });
});

为什么这样能解决问题？ #

• 页面跳转后，新页面的$(document).ready()会触发，通过window.location.pathname获取当前页面的路径，和每个导航链接的href对比，找到匹配项后设置高亮，保证刷新后状态不丢失
• 点击事件里的高亮是为了给用户即时的交互反馈，虽然页面会马上跳转，但能让操作感更流畅

另外提一句：你原来的点击事件里没传e参数，会导致e.preventDefault()报错，现在我们移除了阻止跳转的代码，同时也避免了这个错误。

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