Bootstrap导航菜单Active类异常：多菜单同时激活问题求助

你遇到的核心问题是下拉菜单的父级链接和Home页面的链接指向了同一个URL，当处于Home页面时，这几个链接的href都会匹配当前页面的URL，导致对应的<li>都被加上了active类；再加上代码没有先清除已有的激活状态，最终就出现了所有菜单都激活的情况。

下面是具体的修复方案：

1. 调整JavaScript逻辑，先清后加+处理下拉子项激活 #

修改你的JS代码，先移除所有导航项的active类，再给匹配的项添加；同时处理下拉菜单子项激活时，父级下拉项也需要激活的场景：

$(function ($) {
    let url = window.location.href;
    // 第一步：先移除所有导航li的active类，避免多个激活状态残留
    $('.nav-pills li').removeClass('active');
    // 遍历所有导航链接
    $('li a').each(function () {
        if (this.href === url) {
            let currentLi = $(this).closest('li');
            currentLi.addClass('active');
            // 如果当前链接是下拉菜单的子项，同时激活它的父级下拉li
            if (currentLi.closest('.dropdown-menu').length) {
                currentLi.closest('.dropdown').find('li').addClass('active');
            }
        }
    });
});

2. 优化下拉菜单父级链接（可选但推荐） #

你的下拉菜单父级<a>标签的href指向home.php其实不太合理——下拉菜单的父级通常只是触发下拉展开，不需要跳转。你可以把它改成href="#"并补充Bootstrap规范的属性，彻底避免和Home页面的URL冲突：

<li class="dropdown">
    <a class='dropdown-toggle' data-toggle='dropdown' href="#" role="button" aria-expanded="false">
        <span class='glyphicon glyphicon-book'></span> LSNC Taskforce <span class='caret'></span>
    </a>
    <!-- 下拉菜单内容保持不变 -->
</li>

问题根源复盘 #

• 下拉菜单父级<a>和Home页面的<a>``href完全一致，导致在Home页面时三个<a>都会匹配当前URL，对应<li>都被加了active。
• 代码没有先清除所有active类，即使后续逻辑正确，旧的激活状态也不会被移除。

调整后就能保证同一时间只有一个导航项（或下拉菜单的父项+子项）处于激活状态了。

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