Aktive Navigation basierend auf kontextabhängigen Daten anzeigen

Question

Ich habe ein folgendes getrenntes Fragment in einer Thymeleaf-Vorlage.

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

Ich will eine „aktive“ Klasse aktiven Navigationselement hinzufügen - aber es scheint harte Aufgabe in Thymyleaf, irgendwelche Vorschläge zu erreichen?

Answer 1

könnten Sie fügen einen ModelAttribute mit dem Wert aktiv in Ihrem Controller für jede Seite, zum Beispiel :

SettingsController.java

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

OR in einem SettingsControllerAdvice.java

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

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

} 

im Navigations Fragment in Ihrem settings.html enthalten Dann:

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

Schließlich können Sie diesen Vorgang für jeden Controller und Links in Ihrer Navbar wiederholen.

Answer 2

Sie können dies tun:

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

Answer 3

Obwohl ich denke, dass es hässlich Lösung ist, und es ist schade, dass thymeleaf nicht einige Makros für sie nicht haben, können Sie verwenden:

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

Es wird Arbeiten Sie auch für "tiefere" Links wie /Hotels/neue so ist es auch für Multilevel-Menüs verwendbar.

Answer 4

Während dies eine alte Frage ist, möchte ich diese Lösung teilen, da es viel eleganter sein könnte!

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

• einen Parameter hinzufügen (ACTIVETAB) an das Navigations Fragment.

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

• passieren den Wert davon in den Hauptseiten, die die navbar Fragment

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

• Prüfung für sie in 'li' -Element verwenden einzustellen die 'aktive' Klasse