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

Question

У меня есть список в navbar следующим образом:

<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 не вариант.

С наилучшими пожеланиями