javascript - 单击另一个页面时 Navbar Active 不会改变

Question

导航栏有问题。我希望在用户浏览不同页面时更改激活选项卡。

我使用的是基本模板，所以我不想为每个页面重现导航栏 html/css，所以我相信 javascript 是我这里问题的答案。

我尝试使用另一个问题中的一些 Jquery，不幸的是它产生了一个单独的问题，我对 Jquery 不是很精通，所以我发现很难解决这个问题。

这是HTML

            <div class="container-fluid">

                    <a class="navbar-brand" href="#"><img src="{% static 'images/sidespacer.png' %}"></a>

                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarResponsive">

                        <ul class="navbar-nav ml-auto">

                            <li class="nav-item active"><a class="nav-link" href="/Spaces">Home</a></li>
                            <li class="nav-item"><a class="nav-link" href="/Spaces/space">Spaces</a></li>
                            <li class="nav-item"><a class="nav-link" href="/Spaces/pricing">Prices</a></li>
                            <li class="nav-item"><a class="nav-link" href="/Spaces/howitworks">How it Works</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                            {% if user.is_authenticated %}
                            <li class="nav-item"><a class="nav-link" href="{% url 'logout' %}">Log out
                                {{user.username}}</a></li>
                            {% else %}
                            <li class="nav-item"><a class="nav-link" href="{% url 'signup' %}">Sign Up</a></li>
                            <li class="nav-item"><a class="nav-link" href="{% url 'login' %}">Login</a></li>
                            {% endif %}
                        </ul>

                    </div>

            </div>

    </nav>

这是当前的Jquery

$(document).ready(function() {
    $( ".nav-item" ).bind( "click", function(event) {
        event.preventDefault();
        var clickedItem = $( this );
        $( ".nav-item" ).each( function() {
            $( this ).removeClass( "active" );
        });
        clickedItem.addClass( "active" );
    });
});

Jquery 允许激活状态改变但阻止用户被定向到链接。

提前致谢

Answer 1

试试这个

$(document).ready(function() {
    const linkLi = $( ".nav-item" );
    const linkAnchor = $( ".nav-item a" ); // anchor is require to prevent for not to direct
    linkAnchor.bind( "click", function(event) {
        var clickedItem = $( this ).parent("li:first");
        linkLi.each( function() {
            $( this ).removeClass( "active" );
        });
        clickedItem.addClass( "active" );
    });
   $( ".nav-item a[href$='"+window.location.pathname+"']" ).parent("li:first").addClass("active"); 
});

看到这个(fiddle)