Bootstrap导航栏问题：跳转页面后无法通过JS动态设置active类

这个问题我之前也碰到过！核心原因是每次跳转到新页面时，浏览器会重新加载整个DOM，原来页面的active类状态不会被带到新页面里，必须在新页面加载完成后动态匹配当前URL来设置。给你几个实用的解决方案：

方案1：用jQuery实现（适合依赖jQuery的Bootstrap项目） #

把这段代码放到页面底部（或者你的全局JS文件里），它会在DOM加载完成后自动检测当前URL，给对应的导航项加上active类：

$(document).ready(function() {
    // 获取当前页面的路径（忽略URL参数）
    var currentPath = window.location.pathname;
    // 遍历所有导航链接
    $('.nav.navbar-nav .NavHead a').each(function() {
        var linkPath = $(this).attr('href');
        // 精准匹配路径，处理根路径/的特殊情况
        if (currentPath === linkPath || (currentPath === '/' && linkPath === '/')) {
            // 给当前导航项添加active类，并移除其他项的active类
            $(this).closest('.NavHead').addClass('active').siblings().removeClass('active');
        }
    });
});

方案2：原生JavaScript实现（不依赖jQuery） #

如果你的项目没引入jQuery，用原生JS也能搞定，逻辑和上面一致：

document.addEventListener('DOMContentLoaded', function() {
    const currentPath = window.location.pathname;
    const navLinks = document.querySelectorAll('.nav.navbar-nav .NavHead a');
    
    navLinks.forEach(link => {
        const linkPath = link.getAttribute('href');
        if (currentPath === linkPath || (currentPath === '/' && linkPath === '/')) {
            // 先移除所有导航项的active类
            document.querySelectorAll('.nav.navbar-nav .NavHead.active').forEach(item => {
                item.classList.remove('active');
            });
            // 给当前链接的父级li添加active类
            link.parentElement.classList.add('active');
        }
    });
});

额外提示：后端渲染时直接添加active类 #

如果你的页面是后端动态生成的（比如PHP、Node.js、Python等），也可以在后端直接判断当前URL，渲染时就给对应的导航项加上active类，这样前端不用写JS也能解决问题。举个PHP的例子：

<ul class="nav navbar-nav " data-in="fadeInDown" data-out="fadeOutUp">
    <li class="NavHead <?php echo ($_SERVER['REQUEST_URI'] === '/' ? 'active' : ''); ?>">
        <a href="/">Home</a>
    </li>
    <li class="NavHead <?php echo ($_SERVER['REQUEST_URI'] === '/questions' ? 'active' : ''); ?>">
        <a href="/questions">Questions</a>
    </li>
    <li class="NavHead <?php echo ($_SERVER['REQUEST_URI'] === '/tags' ? 'active' : ''); ?>">
        <a href="/tags">Tags</a>
    </li>
</ul>

不管用哪种方法，核心都是在页面加载完成后，根据当前URL匹配对应的导航项，动态切换active类，这样跳转到新页面后就不用手动刷新啦！

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