javascript - Metro UI CSS：如何实现 class="active" 效果？

Question

在引导程序中，有一个不错的 CSS 类“活动”，可应用于菜单元素以指示用户在哪个页面上。

我认为它在 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 的路由器）并没有使菜单项脱颖而出，即使我明确地设置了没有这些绑定的类。

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

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

Answer 1

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

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

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

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