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

发布于 2024-08-14 03:09:19 字数 230 浏览 4 评论 0原文

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

我非常擅长操作 css 在悬停或选择时更改颜色等,以及在菜单容器中添加/删除/授权项目,但不熟悉如何根据我的选项卡页更改选项卡的颜色开始了有什么快速而肮脏的方法来实现这一点吗?

I want to implement my navigation tabs somewhat like the ones on this site, and I've heard that this was built using ASP.Net MVC. If I'm on stackoverflow.com/users, than the "Users" menu tab is orange and all others stay grey, same if a different tab is selected.

I am pretty good with manipulating the css to change color when it's hovered or selected, etc, and adding/removing/authorizing items in the menu container, but not familiar with how to change the color of the tab based on the tab page that I'm on. Any quick and dirty way to accomplish this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

櫻之舞 2024-08-21 03:09:19

为每个页面的 body 元素分配一个唯一的 id(例如 )。 ASP.NET MVC 中,您可以在母版页中将 body 标记编写为:

">

在 每个页面的控制器方法都放置类似 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 */
}

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

Assign a unique id to the body element of each page (e.g. <body id="users">). In ASP.NET MVC you could have the body tag in your master page written like:

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

And in the Controller methods for each page put something like ViewData["bodyId"] = "users"; to dynamically assign the id for each page.

Then in your nav markup, assign a class with the same name on the <a> tag that links to that page:

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

Then in the css do something like this:

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

That will assign your "current page" styles to any link tag with a class that matches the body tag id.

情绪 2024-08-21 03:09:19

除了 Bryan 提到的之外,在这种情况下,我通常会向我的视图模型添加一个“CssClass”属性。它对于 CssClass 的计算有点复杂的情况也很有用(因为它可以在虚拟机中测试)。

Further to what Bryan mentioned, I usually add a "CssClass" property to my view model in cases like this. It's also useful for the situation where the calculation of the CssClass is a little complex (since it can be tested in a VM).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文