Play框架:如何在路线变更时更改活动班级 [英] Play Framework: How do I change active class on route change

问题描述

我在我的项目中使用Java的Play Framework 2和Bootstrap Helper，并且我想在侧边栏链接单击上应用active类.我正在使用侧面导航栏进行导航，默认情况下，一个链接在页面加载时始终具有active类，因此这就是为什么每次仅将一个链接突出显示为活动链接，而又如何在路线上更改class="active"的原因或链接更改，是否有任何方法可以检查路由路径是否是我们的html scala模板文件.

I am using Play Framework 2 for Java and Bootstrap Helper in my project and I want to apply active class on sidebar link click. I am using side nav bar for navigation and by default one link is always has active class on page load, so thats why in every time only one link is highlighted as a active link, but how to change the class="active" on route or link change, is there any way to check the route path is our html scala template file.

这是我的侧边栏导航代码.

Here are my side bar navigation code.

<ul class="nav nav-list">
     <li class="active"><a href="/menu1">Menu1</a></li>
     <li><a href="/menu2">Menu2</a></li>
     <li><a href="/menu3">Menu3</a></li>
</ul>

这是我的routes文件

GET    /menu1          com.demo.project.controllers.DemoController.menu1()
GET    /menu2          com.demo.project.controllers.DemoController.menu2()
GET    /menu3          com.demo.project.controllers.DemoController.menu3()

请给我一些建议！

推荐答案

最后，我为我的问题找到了解决方案，我也将自己的解决方案分享给其他人. 首先，我在html scala模板文件中创建了一个方法.

Finally I got solution for my problem, I am sharing my solution for others too. Firstly I created a method inside my html scala template file.

@activeLink(currentPath:String) = @{
if(request.path.equals(currentPath)) "active"
}

现在需要在anchor标签的class属性内调用上述方法.

Now need to call the above method inside class attribute of anchor tag.

<ul class="nav nav-list">
 <li class="@activeLink("/menu1")"><a href="/menu1">Menu1</a></li>
 <li class="@activeLink("/menu2")"><a href="/menu2">Menu2</a></li>
 <li class="@activeLink("/menu3")"><a href="/menu3">Menu3</a></li>
</ul>

这是我的最终解决方案，如果某人有另一种解决方案或对另一种解决方案采用不同的方式，请也分享一下.

Here is my final solution, If some one has another solution or approaching different way for the same so please share those also.

这篇关于Play框架:如何在路线变更时更改活动班级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！