我尝试使用引导程序和“活动”类在菜单中标记当前元素,但我不知道如何获取当前页面的价值。
这是我的导航栏:



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





我尝试使用此构造添加“活动”类th:classappend="${module == 'login' ? 'active' : ''}",但是我应该在每个页面的控制器类中添加模块属性。是否有一些解决方案来获取当前活动页面的名称并将此代码代替“ module”属性?

附言我已经找到了一些使用javascript的解决方案,以将选定的元素标记为活动,但是直到更新页面为止,它才有效,但是每个链接都指向另一个页面,并且菜单上的元素不再“活动”。

最佳答案

您可以使用httpservletrequest尝试这种方式:

<ul id="myDIV" class="navbar-nav mr-auto">
      <li class="nav-item">
        <a th:class="${#httpServletRequest.requestURI == 'YOURPREFEREDADDRESS'} ? 'active nav-link' : 'nav-link'" th:href="@{/login}">Вход
                        <span class="sr-only">(current)</span></a>
      </li>
.
.
.
</ul>

关于css - 如何使用 thymeleaf 获取当前页面地址?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55809919/

10-09 15:20
查看更多