单击另一个页面时，导航栏活动不会改变答案

【问题标题】：Navbar Active won't change when clicking to another page单击另一个页面时，导航栏活动不会改变
【发布时间】：2019-05-26 00:47:29
【问题描述】：

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

我使用的是基本模板，所以我不想为每个页面重现导航栏 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 允许激活状态更改，但阻止用户被定向到链接。

提前致谢，

【问题讨论】：

你的代码有点混乱，为什么你用event.preventDefault();代替li？因为".nav-item" 类仅附加到li 而li 默认没有点击行为
老实说，我对 jquery 的了解如此有限，以至于我很难理解你所说的。如果您有解决方案，请在下面分享并尽可能多地解释（像我 5 岁一样解释它：））

标签： javascript html css django bootstrap-4

【解决方案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)

【讨论】：

这与活动导航链接确实发生变化但不会将用户带到点击的页面的问题相同。
不幸的是它现在链接正确但没有改变活动状态：S
能否请您从浏览器控制台检查并确认active li 上的类更改？

【解决方案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>

【讨论】：