Как пометить текущий элемент navbar как активный в начальной загрузке и не потерять его при обновлении экрана?

Question

У меня есть navbar, который ведет на разные страницы в моем веб-приложении.

    <nav class="navbar navbar-expand-md sticky-top navbar-ligth bg-fadded">
        <a class="nav-link waves-effect waves-light" th:href="@{/}">
            <img class="home-logo" alt="UTL-2" th:src="@{/static/img/site-logo.png}"/></a>
        <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
            <ul id="myDIV" class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link waves-effect waves-light" th:href="@{/login}">Login
                        <span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item">
                    <a class="nav-link waves-effect waves-light" th:href="@{/plan}">Plan</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link waves-effect waves-light" th:href="@{/orders}">Orders</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link waves-effect waves-light" th:href="@{/stations}">Stations</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link waves-effect waves-light" th:href="@{/partner}">Partners</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link waves-effect waves-light" th:href="@{/map}">Map</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link waves-effect waves-light" th:href="@{/info}">Info</a>
                </li>

            </ul>

        </div>
    </nav>

И я использую такой простой скрипт для добавления «активного» класса в nav-item:

    <script>
        var btnContainer = document.getElementById("myDIV");
        var btns = btnContainer.getElementsByClassName("nav-item");

        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function() {
                var current = document.getElementsByClassName("active");
                if (current.length > 0) {
                    current[0].className = current[0].className.replace(" active", "");
                }
                this.className += " active";
            });
        }
    </script>

Он работает хорошо, и элементы отмечаются как активные на статической тестовой странице, но когда я нажимаю ссылку, страница переключается на другую страницу, и элемент все еще не имеет «активного» класса. Есть ли способ обновить только тело веб-страницы? Или пометить элемент "активным" классом как-то иначе? Как это работает в начальной загрузке?

Я нашел какое-то решение, используя тимилиф, вопрос в том, как получить текущую активную ссылку: th: classappend = "$ {module == 'login'? 'active': ''}" «модуль» не является правильным элементом, какой одиннадцать может вернуть текущую ссылку?

Answer 1

После нескольких часов, которые я потратил, чтобы найти какое-то простое решение, я написал такой скрипт:

<script>
        var currentPage = window.location.pathname;
        var items = document.getElementById("myDIV").getElementsByClassName("nav-item");
        var activeClass = "active";

        var patt = new RegExp(currentPage.split("/")[1],"i");

        for(var i = 0; i < items.length; i++){
            var navItem = items[i];
            var linkArray = navItem.children[0].href.split("/");
            var linkHTML = linkArray[linkArray.length - 1];
            if(patt.test(linkHTML)){
                navItem.classList.add("active");
            }
        }
    </script>

Работает, но это невозможно, потому что в тимилфиле или при загрузке нет простого встроенного решения этой задачи.