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）

Answer 2

最后使用python解决此问题，例如下面的示例。

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

单击其他页面时，Navbar Active不会更改

2 个答案: