如何在当前菜单项页面上添加活动类？

【问题标题】：How to add active class on current menu item page?如何在当前菜单项页面上添加活动类？
【发布时间】：2015-10-29 09:59:23
【问题描述】：

在我的 Meteor 应用程序中，当页面处于活动状态时，我需要向导航项添加类。
我该怎么做？

【问题讨论】：

标签： javascript html meteor

【解决方案1】：

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>

请注意，如果您想让元素在多个路由中处于活动状态，则必须稍微修改 getActiveClass 帮助器。

【讨论】：

【解决方案2】：

添加包zimme:iron-router-active

如下使用：

class="{{isActiveRoute regex='<route>'}}"

例如

<li class="{{isActiveRoute regex='dashboard'}}">
                        <a href="{{pathFor route='dashboard'}}"><i class="fa fa-th-large"></i> <span
                                class="nav-label">Dashboard</span> </a>
                    </li>

因此，只要 Route 处于活动状态，Link 就会处于活动状态。

【讨论】：