[英]Bootstrap: Navbar Item Stuck on Active State After Scrolling To Another Item?
I'm new to JavaScript and learning using a bootstrap template. 我是JavaScript的新手,正在学习使用引导模板。 The problem I'm having is that in my navigation bar, if I click on an item, then start scrolling, that item still remains active even though I've scrolled to another item as seen here: 我遇到的问题是,在导航栏中,如果我单击一个项目然后开始滚动,即使我已经滚动到另一个项目,该项目仍然保持活动状态,如下所示:
If I clicked on About, then scroll to Portfolio, About still remains Active. 如果单击“关于”,然后滚动到“投资组合”,“关于”仍然保持活动状态。
I'm not sure the relevant code needed to assist me, but based on looking, I noticed these codes in my main.css: 我不确定是否需要相关代码来帮助我,但是基于外观,我在main.css中注意到了以下代码:
.navbar-default a.navbar-brand:link, .navbar-default a.navbar-brand:visited
{
color: #fff;
}
.navbar-default a.navbar-brand:hover, .navbar-default a.navbar-brand:active
{
color: #12bebd;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active,
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav>.active > a:focus
{
color: #12bebd;
background: none;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
transition: color 0.5s;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus
{
background-color: #12bebd;
}
I also noticed in the provided jquery.nav.js: 我还在提供的jquery.nav.js中注意到:
//Handle clicks on the nav
self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));
...
handleClick: function(e) {
var self = this;
var $link = $(e.currentTarget);
var $parent = $link.parent();
var newLoc = '#' + self.getHash($link);
if(!$parent.hasClass(self.config.currentClass)) {
//Start callback
if(self.config.begin) {
self.config.begin();
}
//Change the highlighted nav item
self.adjustNav(self, $parent);
//Removing the auto-adjust on scroll
self.unbindInterval();
//Scroll to the correct position
$.scrollTo(newLoc, self.config.scrollSpeed, {
axis: 'y',
easing: self.config.easing,
offset: {
top: -self.config.scrollOffset
},
onAfter: function() {
//Do we need to change the hash?
if(self.config.changeHash) {
window.location.hash = newLoc;
}
//Add the auto-adjust on scroll back in
self.bindInterval();
//End callback
if(self.config.end) {
self.config.end();
}
}
});
}
e.preventDefault();
},
If I comment out self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));
如果我注释掉self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));
, the item becomes inactive when I scroll away, but I dont get that scrolling animation effect. ,当我滚开时该项目将变为非活动状态,但是我没有那种滚动动画效果。
I'm sure it's fairly simple. 我敢肯定这很简单。 How can I resolve this or where can I look in my code? 如何解决这个问题或在代码中的什么位置查看?
Just remove navbar-default .navbar-nav > li > a:focus,
from this part of your CSS: 只需从CSS的这一部分中删除navbar-default .navbar-nav > li > a:focus,
:
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active,
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav>.active > a:focus
{
color: #12bebd;
background: none;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
transition: color 0.5s;
}
and add as independed part of code (new property & value): 并添加为代码的独立部分(新属性和值):
.navbar-default .navbar-nav > li > a:focus {
color: #fff;
}
This CSS should fix it. 此CSS应该修复它。 Make sure it's loaded after the bootstrap CSS though. 确保在引导CSS之后加载它。
.navbar-default .navbar-nav > li > a:focus {
color: #fff;
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.