我在网页的每个部分的顶部都有三个导航丸。
当我滚动浏览网站时,药丸会激活,并且应该显示白色字体(这在 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 中滚动时使用的 removeClass/addClass。我已经将我的问题归结为这个,但不知道为什么它会导致背景颜色无法更改。
脚本.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
类选择器的背景颜色。
在 bootstrap 中,css 看起来像这样:
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
color: #fff;
background-color: #337ab7;
}
关于jquery - 更改导航药丸 Bootstrap 的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34735042/