Metro UI CSS：如何实现 class="active" 效果？答案

【问题标题】：Metro UI CSS: How to achieve class="active" effect?Metro UI CSS：如何实现 class="active" 效果？
【发布时间】：2015-11-13 12:52:39
【问题描述】：

在引导程序中，有一个不错的 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 中是否有类似的机制用于应用栏或水平菜单？如果没有，我该如何实现？

编辑我发现 class="active" 成功地适用于较低级别的菜单项，但顶层呢？

【问题讨论】：

从在线文档看来，应用栏菜单项似乎没有“活动”类。但也许您可以应用自己的 CSS 来为活动项目提供一些显着的视觉特征？
尝试在你的css中做类似的事情：.app-bar-menu.li.active{visibility: visible !important; } 并尝试 display:block !important;

标签： javascript css twitter-bootstrap-3 durandal metro-ui-css

【解决方案1】：

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

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

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

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

【讨论】：