Question

我正在使用导航栏，当活动时链接会丢失。一切都在.click，但在.scroll我的活动设置都工作，除了更改活动墨水颜色。任何帮助将不胜感激。

这是我的jsfiddle链接。 http://jsfiddle.net/carincamen/hsu9jj0q/34/

$(document).ready(function($){
      var parPosition = [];
    $('.par').each(function() {
        parPosition.push($(this).offset().top);
    });

    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });

        $('nav .navbar ul li a').click(function () {
        $('nav .navbar ul li a').removeClass('active');
            $(this).addClass('active');   
    }); 

       $(document).scroll(function(){
    var position = $(document).scrollTop(),
            index; 
            for (var i=0; i<parPosition.length; i++) {
            if (position <= parPosition[i]) {
                index = i;
                break;
            }

        }
  $('nav .navbar ul li a').removeClass('active');
        $('nav .navbar ul li a:eq('+index+')').addClass('active');
    });

        $('nav .navbar ul li a').click(function () {
        $('nav .navbar ul li a').removeClass('active');
            $(this).addClass('active');
    });   
});

Answer 1

我自己没有做过jquery，但是我使用了Netbeans编辑器，它可能会让设计变得更好？不确定。我建议尝试一下： https://netbeans.org/kb/docs/web/js-toolkits-jquery.html

Answer 2

我找到了问题的解决方案，这是一个相对容易的解决方案。使用bootstrap时，您必须覆盖其中的一些CSS来进行自定义。要做到这一点，你必须确保你有一个更高的点系统。就我而言，.active低于bootstraps css。通过将.nav ul li a添加到.active，它提供了一个更高的点系统来覆盖bootstrap。

http://jsfiddle.net/carincamen/hsu9jj0q/

.nav ul li a.active {
color: rgb(207,219,218);
text-transform: uppercase; 
top: 15px;

}

以下是kaizer1v发布帖子的链接，解释了覆盖引导程序的点系统。

https://stackoverflow.com/a/20542297/4313248

带有删除部分的Navbar链接

2 个答案: