Отображение активной навигации на основе контекстуальных данных

У меня есть следующий отдельный фрагмент в шаблоне Thymeleaf.

<ul class="nav nav-tabs">
    <li role="presentation"><a href="/">Freight Invoices</a></li>
    <li role="presentation"><a href="/processed">Processed Invoices</a></li>
    <li role="presentation"><a href="/postingrules">Posting Rules</a></li>
    <li role="presentation" class="active"><a href="/settings">Settings</a></li>
</ul>

Я хочу добавить "активный" класс к активному элементу навигации - но это кажется трудным сделать в Thymyleaf. Какие-либо предложения?

Ответ 1

Вы можете добавить ModelAttribute значение, активное в ваших контроллерах для каждой страницы, например.

SettingsController.java

@RequestMapping("/settings")
public String viewSettings(Model model) {
  // do stuff
  model.addAttribute("classActiveSettings","active");
  return "settings";
}

ИЛИ в параметре SettingsControllerAdvice.java

@ControllerAdvice(assignableTypes = SettingsController.class)
public class SettingsControllerAdvice {

    @ModelAttribute("classActiveSettings")
    public String cssActivePage() {
        return "active";
    }

}

Затем в фрагменте навигации, включенном в ваши settings.html:

<ul class="nav nav-tabs">
     <!-- Other links -->
    <li role="presentation" th:class="${classActiveSettings}">
       <a th:href="@{/settings}">Settings</a>
    </li>
</ul>

Наконец, вы можете повторить этот процесс для каждого контроллера и ссылки на вашем навигаторе.

Ответ 2

Вы можете сделать это:

<ul class="nav navbar-nav">
    <li th:classappend="${#httpServletRequest.getRequestURI() == '/dashboard' ? 'active':''}"><a th:href="@{/dashboard}"><span>Dashboard</span></a></li>
    <li th:classappend="${#httpServletRequest.getRequestURI() == '/orders' ? 'active':''}"><a th:href="@{/orders}"><span>Orders</span></a></li>
    <li th:classappend="${#httpServletRequest.getRequestURI() == '/income' ? 'active':''}"><a th:href="@{/income}"><span>Income</span></a></li>
    <li role="separator" ></li>
</ul>

Ответ 3

Хотя я думаю, что это уродливое решение, и жаль, что у thymeleaf нет макросов для него, вы можете использовать:

<li th:classappend="${#httpServletRequest.getRequestURI().startsWith('/hotels') ? 'active':''}">
    Hotel
</li>

Он будет работать и для "более глубоких" ссылок, таких как /hotels/new, так что он также может использоваться для многоуровневых меню.

Ответ 4

хотя это старый вопрос, я хочу поделиться этим решением, так как оно может быть гораздо более элегантным!

http://nixmash.com/post/bootstrap-navbar-highlighting-in-thymeleaf

Добавьте параметр (activeTab) к фрагменту навигации.

<div th:fragment="common-navbar(activeTab)"></div>

передать его значение на главных страницах, которые используют фрагмент навигационной панели

 <div th:replace="common/navbar :: common-navbar(about)"></div>

проверьте это в элементе 'li', чтобы установить класс 'active'

 <li th:class="${activeTab == 'about'}? 'active' : null"><a href="">About</a></li>

Ответ 5

Для тех, кто использует Thymeleaf 3:

<a th:href="@{/home}" th:classappend="${#request.getRequestURI() == '/home' ? 'active' : ''}">Home</a>

Если у вас есть контекстный путь в вашем приложении:

<a th:href="@{/home}" th:classappend="${#request.getRequestURI() == '/context-path/home' ? 'active' : ''}">Home</a>

Редактировать:

Быть кратким:

<a th:href="@{/home}" th:classappend="${#request.getServletPath() == '/home' ? 'active' : ''}">Home</a>

Преимущество использования request.getServletPath() заключается в том, что он игнорирует путь контекста, если он есть.

Ответ 6

Может быть, этот код будет полезен для кого-то. Внимание! Это не решение Thymeleaf, просто JS-код, который вы можете добавить на свои страницы.

var currentPage = location.href.match(/(.*?)([^\/]+)$/).pop();
        $(Array.prototype.filter.call($('.menu-head li a:nth-child(1)'), function(item)
        {
            return item.href.endsWith(currentPage)
        })).parents('li').addClass('active');