Question

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

<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”属性？

P.S。我已经找到了一些使用javascript标记选定元素为活动状态的解决方案，但是直到更新页面后，它才起作用，但是每个链接都指向另一个页面，并且菜单上的元素不再“活动”。

Answer 1

您可以使用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>

Answer 2

您可以在这里找到一个工作示例：
https://github.com/petrep/Active_menu_highlight_Thymeleaf
它使用 thymeleaf + spring boot + tomcat 9（v10 不起作用）
希望这会有所帮助

如何使用百里香获取当前页面地址？

2 个答案: