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/master.js, но у вас есть класс active в ваших nav-item и nav-link.

В первую очередь я бы попытался удалить класс active из nav-link и посмотреть, работает ли он.

Следующее, что я бы попробовал, это добавить «активное» состояние в ваш CSS. Я вижу теги Liquid в вашем script src, поэтому, если вы используете готовую тему Jekyll, возможно, она уже добавляет соответствующее активное состояние в разметку.

CSS

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

Если это не сработает, вы можете использовать jQuery, который используется Bootstrap. Ваш скрипт близок, но он ищет .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

Answer 2

Причина, по которой это происходит, заключается в том, что при нажатии на ссылку вы перенаправляетесь на новую страницу. Так что стили, установленные через JS reset. Я хотел бы установить 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 странице переносите JS с <script> </script>