Bootstrap导航仅为激活菜单项添加自定义类的问题排查

你的代码存在两处逻辑错误，直接导致效果不符合预期：

• jQuery类添加目标错误：点击事件绑定在a.nav-link元素上，移除激活类时正确选中了链接内的span标签，但添加类时使用的$(this)指向当前被点击的a.nav-link本身，并没有把类加到你预先放好的span标签上。
• CSS选择器匹配错误：你写的样式规则是a.active-pill，仅会匹配带active-pill类的a标签，就算类正确加到span上，这个选择器也无法命中目标元素，样式不会生效。

修正后的代码 #

JS逻辑 #

$(document).ready(function () {
    $('ul.navbar-nav > li.nav-item > a.nav-link').click(function (e) {
        // 清除所有导航项的激活状态
        $('ul.navbar-nav > li.nav-item > a.nav-link > span').removeClass('active-pill');
        // 给当前点击项内的span添加激活类
        $(this).find('span').addClass('active-pill');
    });
});

CSS样式 #

/* 激活态样式，后续要加背景pill效果直接在这个规则里扩展即可 */
.nav-link span.active-pill {
    color: white;
    /* 背景装饰参考写法：
    background-color: #0d6efd;
    padding: 6px 16px;
    border-radius: 2rem;
    */
}
.nav-link {
    color: black;
}

补充说明 #

你初始HTML中给首页导航的span预先添加active-pill类的写法是正确的，默认激活状态无需调整。如果你的站点是多页跳转而非单页无刷新切换，点击加类的逻辑会在页面刷新后失效，需要根据当前路由给对应导航项的span手动预设激活类。

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