Bootstrap导航栏active类高亮与href跳转功能冲突问题求助

你遇到的这个冲突其实很常见——核心原因是页面跳转后，前端JS设置的样式状态会被完全重置：

• 加e.preventDefault()时，虽然能成功给导航项加上active类，但阻止了浏览器的默认跳转行为，导致链接失效；
• 去掉它的话，页面会立刻跳转，JS还没来得及完成active类的添加，页面就已经刷新了，所以看不到高亮效果。

下面给你两种可行的解决方案，按需选择：

方案一：纯前端实现——页面加载时匹配URL设置高亮 #

修改你的JS代码，去掉点击事件里的e.preventDefault()，同时在页面初始化时根据当前URL自动匹配对应的导航项并高亮：

$(document).ready(function () {
    // 页面加载完成后，根据当前URL设置active类
    const currentPath = window.location.pathname;
    $(".navbar-nav .nav-link").each(function() {
        if ($(this).attr("href") === currentPath) {
            $(this).closest('.nav-item').addClass('active');
            return false; // 找到匹配项后停止循环
        }
    });

    // 点击导航项时先添加高亮，再正常跳转（提升用户体验）
    $(".navbar-nav .nav-link").click(function () {
        $('.nav-item').removeClass('active');
        $(this).closest('.nav-item').addClass('active');
        // 这里不再阻止默认行为，让链接正常跳转
    });
});

为什么这样有效？ #

1. 页面加载时，通过window.location.pathname获取当前页面的路径，和导航项的href对比，给匹配的项加上active类，确保跳转后的页面能正确高亮；
2. 点击导航项时，先临时给当前项加上高亮（用户能看到即时反馈），然后让浏览器正常跳转，新页面加载后又会重新执行初始化逻辑设置高亮。

方案二：后端渲染时直接设置active类（更可靠） #

如果你的页面是通过后端框架（比如Flask、Django、Node.js等）渲染的，这是更推荐的方案——在后端生成HTML时，直接根据当前路由给对应的导航项加上active类。

举个Flask的例子：

<li class="nav-item {% if request.path == '/home' %}active{% endif %}">
    <a class="nav-link external" href="/home" data-toggle="tab">Home</a>
</li>
<li class="nav-item {% if request.path == '/about' %}active{% endif %}">
    <a class="nav-link external" href="/about" data-toggle="tab">About us</a>
</li>

其他后端框架的逻辑类似，都是通过判断当前请求的路径，动态添加active类。这种方式不需要依赖前端JS，页面渲染出来就已经有正确的高亮，不会出现延迟或失效问题。

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