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

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

编辑：这是我在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类选择器上的背景颜色。

在bootstrap中，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/

改变导航丸引导的颜色

2 个答案: