如何在当前菜单项页面添加活动类？ [英] How to add active class on current menu item page?

问题描述

解决方案在我的Meteor应用程序中，我需要在页面处于活动状态时将类添加到导航项目中。方案

  Template.header.helpers（{getActiveClass：function（routeName）{var active = Router.current（）&& Router.current（）。route.getName ）=== routeName; return active&&'active';}}）;  

 < li class ={{getActiveClass'home'}}> < a href =＃>主页< / a>< / li>  

请注意，如果您想让元素对多条路线有效，您必须稍微修改getActiveClass助手。

In my Meteor app I need to add class to navigation item when page is active.
How can I do that?

解决方案

Template.header.helpers({
  getActiveClass: function(routeName) {
    var active = Router.current() && Router.current().route.getName() === routeName;

    return active && 'active';
  }
});

<li class="{{getActiveClass 'home'}}">
  <a href="#">Home</a>
</li>

Note if you want to make the element active for more than one route you have to modify the getActiveClass helper a little bit.

这篇关于如何在当前菜单项页面添加活动类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！