13

アクティブなメニュー項目のスタイルを設定したいのですが、これを行うには、現在の URL とルートを比較する必要があります。私はJavaScriptでこれを行うことができることを知っていますが、他の人がこれをどのように解決したのか疑問に思っていました.

助言がありますか？

擬似コード:

<a #{routeIsActive Application.index()} class="active"#{/if} href="@{Application.index()}">My Page</a>
4

4 に答える 4

11 
<a #{if request.action=="Application.index"}class="active"#{/if} href="@{Application.index()}">My Page</a>

簡単。:D

于 2011-06-03T21:02:27.580 に答える
3

このソリューションは私にとってはかなりうまくいきました。非常にシンプルであるという利点があります。

アプリ/ビュー/タグ/navigationitem.js

%{
 boolean isMatch = request.path.startsWith(_href.toString());
}%
<li class="sliding-element">
#{if isMatch}
<h3>${_title}</h3>
#{/if}
#{else}
<a href="${_href}">${_title}</a>
#{/else}
</li>

アプリ/ビュー/タグ/navigationmenu.js

#{js 'navigationmenu.js'/}
#{css 'navigationmenu.css'/}

<div id="navigation-block">
    <ul id="sliding-navigation">
        #{navigationitem title:'Home', href:@HomeController.index() /}
        #{navigationitem title:'Search Contact', href:@SearchByContactController.index() /}
        #{navigationitem title:'Edit Contact', href:@EditContactInfoController.index() /}
    </ul>
</div>
于 2011-04-26T21:17:25.570 に答える
3

残念ながら、これを行う簡単な方法が見つかりませんでした。私が見つけた最も簡単な解決策は、高速タグを作成することでした (ただし、これは、Groovy の経験が不足していることが原因である可能性があります)。

私はこれをこのコードで動作させました。

あなたの見解で

<a class="#{activeRoute href:@Application.index(), activeClass:'active' /}" href="@{Application.index()}">My Page</a>

次に、activeRoute 用の新しい FastTag を作成します。

public class MyFastTag extends FastTags {

   public static void _activeRoute(Map<?, ?> args, Closure body, PrintWriter out, GroovyTemplate.ExecutableTemplate template, int fromLine) {
      Router.ActionDefinition actionDef = (Router.ActionDefinition) args.get("href");
      String activeStyle = (String) args.get("activeClass");
      String inactiveStyle  = (String) args.get("inactiveClass");

      if (Http.Request.current().action.equals(actionDef.action) && activeStyle != null) {
         out.print(activeStyle);
      }
      else if (!Http.Request.current().action.equals(actionDef.action) && inactiveStyle != null) {
         out.print(inactiveStyle);
      }
   }
}

関連するインポートを必ず追加してください。

これにより、アクティブなクラスと非アクティブなクラスを指定できます。これは、要求したよりも少し多くなります。

于 2010-12-10T11:06:29.687 に答える
1

このコードは私のために働きます

<li @if(request.path.startsWith("/artigo")){ class="active" }>
    <a href="@routes.ArtigoController.telaLista"> Artigos</a>
</li>
于 2016-08-02T13:11:36.260 に答える