javascript - 地铁用户界面 CSS : How to achieve class ="active" effect?

Question

在 bootstrap 中有一个很好的 css 类 'active' 可以应用于菜单元素以指示用户在哪个页面上。

我认为它在 metro ui 中也能正常工作，但我错了

<ul class="app-bar-menu" data-bind="foreach: router.navigationModel">
   <li data-bind="css: { active: isActive }">
      <a data-bind="attr: { href: hash }, text: title"></a>
   </li>
</ul>

上面的代码(使用 Durandal 的路由器)并没有使菜单项脱颖而出，即使我在没有这些绑定(bind)的情况下明确设置了类。

Metro UI CSS 中是否有用于应用栏或水平菜单的类似机制？如果没有，我该如何实现？

编辑我发现 class="active"可以成功地与较低级别的菜单项一起使用，但是顶级菜单项呢？

Answer 1

除了添加 css 覆盖之外，我没有找到其他解决方案。对于应用栏，这将是

.app-bar-menu > li.active {
    background-color: #005696;
}

如果您使用非默认颜色，则必须专门针对您的情况进行设置，例如绿色:

.app-bar.green .app-bar-menu > li.active {
    background-color: #128023;
}