Playframework是活动菜单项/路线

我想设置活动菜单项的样式，为此，我需要将当前url与路由进行比较。我知道我可以用javascript来实现这一点，但我想知道其他人是如何在游戏中解决这个问题的

有什么建议吗

伪代码：

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

---

不幸的是，我找不到一个简单的方法来实现这一点。我能找到的最简单的解决方案是编写一个快速标记（但这可能是因为我缺乏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);
      }
   }
}

公共类MyFastTag扩展了FastTags{
公共静态void\u activeRoute（映射参数、闭包体、PrintWriter输出、GroovyTemplate.ExecutableTemplate模板、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）{
打印（activeStyle）；
}
如果（！Http.Request.current（）.action.equals（actionDef.action）&&inactiveStyle！=null），则为else{
打印输出（不显示样式）；
}
}
}

确保添加了相关的导入

---

这允许您指定一个活动类和非活动类，这比您所要求的稍多一些

这个解决方案对我来说非常有效。它的好处是非常简单

app/views/tags/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>

%{
boolean isMatch=request.path.startsWith（_href.toString（））；
}%

#{if isMatch}
${u title}
#{/if}
#{else}
#{/else}

app/views/tags/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>

{js'navigationmenu.js'/}
#{css'导航菜单.css'/}

#{navigationitem标题：'Home'，href:@HomeController.index（）/}
#{navigationitem标题：'Search Contact'，href:@SearchByContactController.index（）/}
#{navigationitem标题：'Edit Contact'，href:@EditContactInfoController.index（）/}

---

简单这个代码对我来说很有用

<li @if(request.path.startsWith("/artigo")){ class="active" }>
    <a href="@routes.ArtigoController.telaLista"> Artigos</a>
</li>

为什么要使用

else if

而不是简单的

else

？因为，如果inactiveStyle为null，它将打印null作为样式，如果activeStyle或inactiveStyle为null，我不希望打印任何内容……。if的第一部分是相同的，但是对于这两个if语句，第二个求值是不同的。您还可以像这样检查控制器库（对全局导航有用）：#{if request.controller==“ControllerClassName”}class=“active”#{/if}

<li @if(request.path.startsWith("/artigo")){ class="active" }>
    <a href="@routes.ArtigoController.telaLista"> Artigos</a>
</li>