導航葯丸引導程序的顏色更改

Question

我的網頁的每個部分的頂部都有三個導航欄。

當我滾動瀏覽網站時，葯丸將變為活動狀態，並應顯示白色字體（在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;
}

我還在background-color的末尾添加了!important ，但是背景仍然顯示為藍色。 我的問題是，當導航葯丸處於活動狀態時，如何擺脫藍色背景？

編輯：這就是我在Jquery中滾動時使用的Class.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');
    }
});

Answer 1

: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;
}

Answer 2

HTML：

<ul class="nav nav-pills your_nav_class">
    <li class="active"><a href="#tab1" data-toggle="tab">Home</a></li>
    <li><a href="#tab2" data-toggle="tab">Resume</a></li>
    <li><a href="#tab3" data-toggle="tab">Contact</a></li>
</ul>

CSS：

.your_nav_class .active a,.your_nav_class .active a:hover,.your_nav_class .active a:focus {
    background-color: #536872;
    color: #FFFFFF;
}

演示鏈接： http : //jsfiddle.net/hellosrini/Y36FV/225/