web-dev-qa-db-ja.com

コンテキストデータに基づくアクティブナビゲーションの表示

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では実現が難しいようです。助言がありますか？

javaspringjspnavigationthymeleaf
17
thevangelist

ModelAttributeを値activeとともに各ページのコントローラに追加できます。 ：

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>

最後に、コントローラごとにこのプロセスを繰り返し、ナビゲーションバーにリンクを設定できます。

12
lgd

あなたはこれを行うことができます：

<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>
60
Denger Tung

私はそれが醜い解決策であり、thymeleafがそれにいくつかのマクロを持っていないのは残念ですが、あなたは使うことができます：

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

/ hotels/newのような「より深い」リンクにも機能するので、マルチレベルのメニューにも使用できます。

22
lukyer

これは古い質問ですが、このソリューションはよりエレガントになる可能性があるため、共有したいと思います。

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

  • ナビゲーションフラグメントにパラメーター（activeTab）を追加します。
<div th:fragment="common-navbar(activeTab)"></div>
  • navbarフラグメントを使用するメインページでその値を渡す
 <div th:replace="common/navbar :: common-navbar(about)"></div>
  • 「アクティブ」クラスを設定するには、「li」要素でそれを確認します
 <li th:class="${activeTab == 'about'}? 'active' : null"><a href="">About</a></li>
8
Ahmad

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()を使用する利点は、コンテキストパスがあっても、それを無視することです。

1
Rodney Kimathi

このコードは誰かに役立つかもしれません。注意！これは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');
0
Orkhan Hasanli