c# - 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 构建的。如果我在 stackoverflow.com/users 上，那么“用户”菜单选项卡是橙色的，所有其他选项卡保持灰色，如果选择不同的选项卡也是如此。

我很擅长在鼠标悬停或选中时操作 css 更改颜色等，以及在菜单容器中添加/删除/授权元素，但不熟悉如何根据选项卡更改选项卡的颜色我所在的页面。有什么快速而肮脏的方法可以做到这一点吗？

最佳答案

为每个页面的正文元素分配一个唯一的 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 匹配的类的任何链接标签。