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: How can I easily change the tab color of my navigation menu based on the tab that I'm on?

开发者 https://www.devze.com 2022-12-13 22:48 出处：网络

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 ora

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/authori开发者_开发问答zing 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?

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.

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).