Hiển thị điều hướng hoạt động dựa trên dữ liệu theo ngữ cảnh

Question

Tôi có một đoạn được tách biệt sau đây trong mẫu 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> 

Tôi muốn thêm lớp "hoạt động" vào phần tử điều hướng đang hoạt động - nhưng có vẻ khó thực hiện nhiệm vụ trong Thymyleaf, bất kỳ đề xuất nào?

Answer 1

Bạn có thể thêm một ModelAttribute với giá trị hoạt động trong bộ điều khiển của bạn cho mỗi trang, ví dụ :

SettingsController.java

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

HOẶC trong một SettingsControllerAdvice.java

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

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

} 

Sau đó, trong đoạn chuyển hướng trong settings.html bạn:

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

Cuối cùng, bạn có thể lặp lại quy trình này cho từng bộ điều khiển và liên kết trong thanh điều hướng của mình.

Answer 2

Bạn có thể làm điều này:

<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

Mặc dù tôi nghĩ rằng đó là giải pháp xấu xí và nó là đáng tiếc là thymeleaf không có một số macro cho nó, bạn có thể sử dụng:

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

Nó sẽ cũng làm việc cho các liên kết "sâu hơn" như /khách sạn/mới để có thể sử dụng được cho các menu đa cấp.

Answer 4

trong khi đây là câu hỏi cũ, tôi muốn chia sẻ giải pháp này vì nó có thể thanh lịch hơn nhiều!

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

• Thêm một tham số (activeTab) đến đoạn điều hướng.

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

• vượt qua giá trị của nó trong các trang chính mà sử dụng các đoạn navbar

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

• kiểm tra cho nó trong phần tử 'li' để thiết lập lớp 'đang hoạt động'

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