Как обозначить активный элемент в меню с использованием Bootstrap u thymeleaf?

179
09 февраля 2020, 04:50

Есть панель навигации, в которой классом active должен маркироваться активный элемент, но возник вопрос, как с использованием thymeleaf либо в javascript получить адрес текущей страницы, к примеру /login, /home, /map для того чтобы дальше использовать для добавления класса "active" к элементу : th:classappend="${module == 'login' ? 'active' : ''}, ведь элемент module приходится в ручную добавлять в каждом контроллере в post и get запросах, что не очень изящно. Вот собственно 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> 
        <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>

Использовал для всего этого скрипт он выполняется, но каждый пункт меню ведет на новую страницу и класс "active" при обновлении пропадает:

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

Answer 1

Добавил совершенно бешенный javascript который по адресу текущей активной страницы добавляет "active" класс к элементу с сылкой на текущую страницу, но это как колесо изобретать, неужели нету встроенного механизма в bootstrap или thymeleaf как решить эту проблему существующими методами. Собственно код следующий:

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

READ ALSO
Intersection Observer для первого элемента во viewport&#39;е
HTML

Intersection Observer для первого элемента во viewport'е

Есть вот такой референс:

 191
VueJS спарсить HTML
HTML

VueJS спарсить HTML

Есть страница со списком товаров, которые генереруются на PHP Хочу на JS собрать все необходимые данные по каждому товару: название, цена и другиеПотом...

 207
маску на два инпута для ввода телефона
HTML

маску на два инпута для ввода телефона

Вот макет

 178
CryptoPro ошибка spki.algorithm.parameters
c#

CryptoPro ошибка spki.algorithm.parameters

При переходе на новый алгоритм шифрования ГОСТ Р 3410-2012 256 сервер начал выдавать ошибку spki

 182