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

P.S 没做过 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