Bootstrap4 scroll spy -主动到家长李

Question

我有这样的bootstrap4菜单：

<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#introduction">INTRODUKTION <span class="sr-only">(current)</span></a></li>
</ul>

默认scroll spy将active添加到nav-link (a)我需要更改它，因为我的active应该在nav-item (li)之后。我可以这样做吗？

你可以在这里看到这个：Example

当我点击的时候，一切都正常--但是在scroll - active上是一个href。

Answer 1

默认情况下，.active类将仅添加到锚定标记。

根据您的需求尝试如下所示

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  $(".navbar-nav .active").removeClass("active").parent().addClass("active");
})

添加属性data-spy="scroll"

在带有id="introduction"的部分的父级<div class="container">上

喜欢

<div class="container" data-spy="scroll">

Answer 2

我找到了解决方案。我只需要添加新的事件(cssClassChanged) -和工作！

(function(){
    // Your base, I'm in it!
    var originalAddClassMethod = jQuery.fn.addClass;

    jQuery.fn.addClass = function(){
        // Execute the original method.
        var result = originalAddClassMethod.apply( this, arguments );

        // trigger a custom event
        jQuery(this).trigger('cssClassChanged');

        // return the original result
        return result;
    }
})();

然后

$(".nav-link").bind('cssClassChanged' , function(e) {
        $(".nav-item").each( function() {
            if( $(this).hasClass("active") == true ) {
                $(this).removeClass("active");
            }
        });

        $(this).removeClass("active").parent().addClass("active");
    });