ASP.Net MVC：如何根据我所在的选项卡轻松更改导航菜单的选项卡颜色？答案

【问题标题】：ASP.Net MVC: How can I easily change the tab color of my navigation menu based on the tab that I'm on?ASP.Net MVC：如何根据我所在的选项卡轻松更改导航菜单的选项卡颜色？
【发布时间】：2010-12-24 07:53:39
【问题描述】：

我想实现我的导航选项卡有点像这个网站上的那些，我听说这是使用 ASP.Net MVC 构建的。如果我在 stackoverflow.com/users 上，则“用户”菜单选项卡为橙色，所有其他选项卡保持灰色，如果选择了不同的选项卡，则相同。

我很擅长操纵 css 以在悬停或选择时更改颜色等，以及在菜单容器中添加/删除/授权项目，但不熟悉如何根据选项卡更改选项卡的颜色我所在的页面。有什么快速而肮脏的方法来完成这个吗？

【问题讨论】：

标签： c# asp.net-mvc css menu master-pages

【解决方案1】：

为每个页面的正文元素分配一个唯一的 id（例如<body id="users">）。在 ASP.NET MVC 中，您可以在母版页中使用 body 标记，如下所示：

<body id="<%= ViewData["bodyId"] %>">

并且在每个页面的 Controller 方法中放置 ViewData["bodyId"] = "users"; 之类的内容，以便为每个页面动态分配 id。

然后在您的导航标记中，在链接到该页面的标记上分配一个具有相同名称的类：

<ul>
    <li><a href="/users" class="users">Users</a></li>
    <li><!-- more links --></li>
</ul>

然后在css中做这样的事情：

body#users a.users, body#another-page a.another-page {
    /* include rules for how you want the current page tab to appear */
}

这会将您的“当前页面”样式分配给任何具有与正文标签 ID 匹配的类的链接标签。

【讨论】：

【解决方案2】：

除了 Bryan 提到的内容之外，在这种情况下，我通常会在我的视图模型中添加一个“CssClass”属性。对于 CssClass 的计算有点复杂的情况（因为它可以在 VM 中测试）也很有用。

【讨论】：