Сохранять активный класс в навигации при перезагрузке страницы

У меня есть следующий список на панели навигации:

<ul class="nav navbar-nav mx-auto">
    <li role="presentation" class="nav-item"><a href="home.html" class="nav-link">About us</a></li>
    <li role="presentation" class="nav-item"><a href="mission.html" class="nav-link">Our mission</a></li>
    <li role="presentation" class="nav-item"><a href="news.html" class="nav-link">News</a></li>
</ul>

Я пытаюсь сохранить активный класс при перезагрузке страницы (после перенаправления на href в ссылках), но он всегда мерцает. Итак, мой вопрос: как сохранить активный класс при перезагрузке страницы? У меня нет nav-tabs, и я не могу заставить jquery сохранять класс при перезагрузке страницы (он мерцает, пока документ не будет готов).

Если бы у меня был nav-tabs, я мог бы сделать что-то вроде этого:

$(document).ready(function() {
    if (location.hash) {
        $("a[href='" + location.hash + "']").tab("show");
    }
    $(document.body).on("click", "a[data-toggle]", function(event) {
        location.hash = this.getAttribute("href");
    });
});
$(window).on("popstate", function() {
    var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
    $("a[href='" + anchor + "']").tab("show");
});

Но у меня nav-link, а не nav-tabs. PHO не вариант.

С уважением

Вы должны посмотреть, как использовать localStorage или cookies для достижения этой цели.

Carsten Løvbo Andersen 10.09.2018 11:00

@ CarstenLøvboAndersen Я пробовал, но не смог заставить его работать.

user1665355 10.09.2018 11:02

Тогда, пожалуйста, покажите нам, что вы пробовали

Carsten Løvbo Andersen 10.09.2018 11:13

@ CarstenLøvboAndersen Обновлено.

user1665355 10.09.2018 11:22

@ CarstenLøvboAndersen Нет идей?

user1665355 10.09.2018 13:13
0
5
132
0

Другие вопросы по теме