jquery - 导航药丸 bootstrap 的颜色更改

我的网页的每个部分的顶部都有三个导航栏。



当我滚动浏览网站时，药丸将变为活动状态，并应显示白色字体（在Jquery中已解决，这不是我关心的问题）。

这是我的CSS：

#home:hover, #resume:hover, #contact:hover,
#home:focus, #resume:focus, #contact:focus,
#home:active, #resume:active, #contact:active {
    background-color: #536872;
    color: #FFFFFF;
}

我还在!important的末尾添加了background-color，但是背景仍然显示为蓝色。我的问题是，当导航药丸处于活动状态时，如何摆脱蓝色背景？

编辑：这就是我在滚动时在Jquery中使用的removeClass / addClass。我已经将问题定位到了这一点，但是不知道为什么会导致背景颜色无法更改。

script.js：

//Change active class when scrolling
$(window).scroll(function() {
    var position = $(document).scrollTop();

    if (position <= home.top - 80) {
        $('.home-class').removeClass('active');
        $('.resume-class').removeClass('active');
        $('.contact-class').removeClass('active');
    }

    if (position >= home.top - 80) {
        $('.home-class').addClass('active');
        $('.resume-class').removeClass('active');
        $('.contact-class').removeClass('active');
    }

    if (position > resume.top - 50) {
        $('.home-class').removeClass('active');
        $('.resume-class').addClass('active');
        $('.contact-class').removeClass('active');
    }

    if (position > contact.top - 50) {
        $('.home-class').removeClass('active');
        $('.resume-class').removeClass('active');
        $('.contact-class').addClass('active');
    }
});

最佳答案

:active仅在单击按钮或链接时调用。它与类.active不同

您需要做的是更新.active类选择器上的背景颜色。

在引导中，css如下所示：

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #337ab7;
}