Navbar Active не изменится при переходе на другую страницу

Question

Навбар глючит.Я хочу, чтобы активация изменялась на вкладке, когда пользователь просматривает разные страницы.

Я использую базовый шаблон, поэтому я не хочу воспроизводить html / css navbar для каждой отдельной страницы, поэтому я считаю, что 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

В конце концов использовал python для решения этой проблемы, пример ниже.

<li class="nav-item {% if request.path == index_url %}active{% endif %}" id="HomeNav"><a class="nav-link" href="{{ index_url }}">Home</a></li>

Answer 2

попробуйте это

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

посмотрите это ( скрипка )