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