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

不幸的是，我找不到一个简单的方法来做到这一点。我能找到的最简单的解决方案是编写一个快速标签（但这可能是由于我缺乏 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 回答
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 回答
1

这段代码对我有用

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