Question

我想设置活动菜单项的样式，为此我需要比较当前的URL再次路由。我知道我可以用javascript做到这一点，但我想知道其他人是如何解决这个问题的。

有什么建议吗？

伪代码：

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

Answer 1

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

易。：d

Answer 2

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

确保添加相关导入。

这允许您指定一个活动和非活动类，这比您请求的更多

Answer 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>

Answer 4

此代码适用于我们

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

Playframework是活动菜单项/路线

4 个答案: