There is a navigation bar in which the active element should mark the active element, but the question arose how to get the address of the current page using thymeleaf or in javascript, for example / login, / home, / map in order to use it further to add the class "active" to the element: th: classappend = "$ {module == 'login'? 'active': ''}, because the module element must be manually added to each controller in the post and get requests, which is not very elegant. Here is the navbar itself all elements:

<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> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent"> <ul id="myDIV" class="navbar-nav mr-auto"> <li class="nav-item" th:classappend="${module == 'login' ? 'active' : ''}"> <a class="nav-link waves-effect waves-light" th:href="@{/login}">Вход <span class="sr-only">(current)</span></a> </li> <li class="nav-item" th:classappend="${module == 'plan' ? 'active' : ''}"> <a class="nav-link waves-effect waves-light" th:href="@{/plan}">График <br/>отгрузки</a> </li> <li class="nav-item" th:classappend="${module == 'orders' ? 'active' : ''}"> <a class="nav-link waves-effect waves-light" th:href="@{/orders}">Заявки</a> </li> <li class="nav-item" th:classappend="${module == 'stations' ? 'active' : ''}"> <a class="nav-link waves-effect waves-light" th:href="@{/stations}">Справочник <br/>станций</a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light" th:href="@{/partner}">Справочник <br/>контрагентов</a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light" th:href="@{/map}">Карта</a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light" th:href="@{/info}">Информация</a> </li> <li class="nav-item" sec:authorize="hasRole('ADMIN')"> <a class="nav-link waves-effect waves-light" th:href="@{/admin}">Панель <br/>администратора</a> </li> </ul> <div id="logged-in-info"> <span sec:authorize="isAuthenticated()">Hello, <b sec:authentication="name">(Anonimous)</b></span> <!--<span th:text="${#authentication.getPrincipal().getUsername()}"></span>--> <form sec:authorize="isAuthenticated()" method="post" th:action="@{/logout}"> <input type="submit" class="btn btn-light" value="Logout"/> </form> <form sec:authorize="isAnonymous()" method="post" th:action="@{/login}"> <input type="submit" class="btn" value="Login"/> </form> </div> </div> </nav>

I used the script for all this, it is executed, but each menu item leads to a new page and the "active" class disappears during the update:

  <script> // Add active class to the current button (highlight it) var header = document.getElementById("myDIV"); var btns = header.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>

    1 answer 1

    I added absolutely crazy javascript which at the address of the current active page adds the "active" class to the element with a link to the current page, but this is how to reinvent the wheel, is there really no way for the built-in mechanism in bootstrap or thymeleaf to solve this problem with existing methods. The actual code is as follows:

     <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>