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>

默认滚动间谍为nav-link添加了活动（a）我需要更改它，因为我的活动应该在nav-item（li）之后。我能这样做吗？

你可以在这里看到： Example

当我点击时，一切正常 - 但在滚动 - 活动是一个href。

Answer 1

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

根据您的要求尝试这样的事情

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

添加属性data-spy="scroll"

<{1> <div class="container"> id="introduction"

部分的父级

像

<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");
    });

Bootstrap4滚动间谍 - 活跃到父李

2 个答案: