Question

我是JavaScript新手并使用自举模板学习。我遇到的问题是，在我的导航栏中，如果我点击一个项目，然后开始滚动，即使我已经滚动到另一个项目，该项目仍然保持活动状态，如下所示：

如果我点击“关于”，则滚动到“投资组合”，“关于仍然保持活动状态。”

我不确定需要哪些相关代码来帮助我，但基于查看，我在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;
}

我也在提供的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();
        },

如果我注释掉self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));，当我滚动时，该项目将变为非活动状态，但我不会获得滚动动画效果。

我确定它相当简单。我该如何解决这个问题或在哪里查看我的代码？

Answer 1

只需从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;
}

并添加为代码的独立部分（新属性和值）：

.navbar-default .navbar-nav > li > a:focus {
   color: #fff;
}

Answer 2

这个CSS应该修复它。确保它在bootstrap CSS之后加载。

.navbar-default .navbar-nav > li > a:focus {
   color: #fff;

}

Bootstrap：滚动到另一个项目后，Navbar项目是否处于活动状态？

2 个答案: