Bootstrap 4高亮导航栏激活

Question

如何在点击时突出显示当前页面？

导航栏

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link active" href="{% url 'page1' %}"> Football
                <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{% url 'page2' %}">Overview</a>
        </li>
    </ul>
</div>

.html末尾的脚本

<script src="{% static "JS/master.js" %}" type="text/javascript"></script>

.JS

$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});

PS我以前从未做过JS

Answer 1

发生这种情况的原因是，当您单击链接时，您将被重定向到新页面。 因此，通过JS设置的样式将重置。 我要做的是为每个导航元素设置一个id，然后在页面加载时添加活动类，如下所示：

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <ul class="navbar-nav">
        <li id="link-football" class="nav-item active">
            <a class="nav-link active" href="{% url 'page1' %}"> Football
                <span class="sr-only">(current)</span></a>
        </li>
        <li id="link-overview" class="nav-item">
            <a class="nav-link" href="{% url 'page2' %}">Overview</a>
        </li>
    </ul>
</div>

然后在页面加载时，您可以执行以下操作：

//on the football page
$(document).ready(function(){
   $(".active").removeClass("active");
   $("#link-football").addClass("active");
});

进一步说明：

您通过javascript添加的任何样式都会反映在DOM中，但不会覆盖源文件。 因此，您的静态页面在足球页面上始终设置为.active 。 通过F5或JS脚本加载/重新加载页面时，也将重新加载该静态文件，而不会反映通过JS完成的任何更改。 这就是为什么我说要在页面加载后添加active类，原因是您可能知道所在的页面，并因此调用了活动链接。

我还建议默认情况下不要将任何内容设置为活动状态。 您可以将主页设置为默认活动状态，我知道这种情况会发生，但是如果您忘记将上述脚本添加到新页面中，则可能会引起混乱。

有关使用IDE和/或使用{% extends 'base.html' %}

要使其在扩展**base.html**时起作用，请在页面末尾添加{% block content %} 。 即

{% block content %}

{% endblock %}
</body>
</html>

然后在每个后续的.html页面上，用<script> </script>包裹JS 。

Answer 2

我不知道JS/master.js发生了什么，但是您在nav-item和nav-link中都active了该类。

我要尝试的第一件事是从nav-link删除active的类，然后查看是否可行。

我接下来要尝试的是在CSS中添加“活动”状态。 我在script src看到Liquid标签，因此，如果您使用的是预制的Jekyll主题，则它可能已经在标记中添加了适当的活动状态。

的CSS

/* Active state */
.nav-item.active a {
  color: red;
}

如果这不起作用，则可以使用Bootstrap使用的jQuery。 您的脚本很接近，但是正在寻找.nav .nav-link ，它不在提供的HTML中。 它可能是在标记的更大上下文中使用的，但您可以仅将.nav-link定位为目标。

jQuery的

var activeNavItem = $('.nav-item');

activeNavItem.click(function(){
  activeNavItem.removeClass('active');
  $(this).addClass('active');  
});

根据您的情况，这可能会或可能不会有帮助。 这是有关CodePen的工作演示： https ://codepen.io/mikejandreau/pen/BbXKZV