Changing color of nav pills bootstrap

I have three navigation pills at the top for each section of my webpage.

When I scroll through the website, the pill will become active, and should display a white colored font (this is taken care of in Jquery, which is not my concern here).

Here's my CSS:

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

I've also added a !important at the end of the background-color , but the background still shows up as blue. My question is, how do I get rid of the blue background when the navigation pill is active?

EDIT: This is what I'm using in Jquery to removeClass/addClass when I'm scrolling. I've pinpointed my problem down to this, but don't know why it's causing the background color to be unchangeable.

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 is only invoked when the button or link is being clicked. It is not the same as the class .active

What you need to do is update the background colour on the .active class selector.

In bootstrap the css looks like this :

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

---

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

Demo Link: http://jsfiddle.net/hellosrini/Y36FV/225/

链接地址: http://www.djcxy.com/p/83664.html

上一篇: 将window.location添加到正文类

下一篇: 改变导航丸bootstrap的颜色