改变导航丸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;
}
我还在background-color
的末尾添加了一个!important
,但背景仍显示为蓝色。 我的问题是,如何在导航药丸处于活动状态时摆脱蓝色背景?
编辑:这是我在使用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
。 它与class .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;
}
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/
链接地址: http://www.djcxy.com/p/83663.html