Tutorial :ASP.NET MVC: Tabs ASCX - Adjust CSS class based on current page?



Question:

I have an ASP.NET MVC application and I'm trying to implement tabs which will navigate to different pages. The tabs are implemented as a simple ASCX usercontrol, e.g.

<ul>      <li><a href="xyz1.html">Number One</a></li>      <li class="activePage"><a href="xyz2.html>Number Two</a></li>      <li><a href="xyz1.html">Number Three</a></li>  </ul>  

The current page is designed through the "activePage" css class (in above demo code on tab #2).

What is an easy and efficient way to communicate to the ASCX which tab should get the activePage class without having to modify it for each page?

Sample code is highly appreciated.


Solution:1

Would a solution such as using jQuery to highlight the active tab work for you?

You could select the <a> that contains the href attribute that equals the current page, and add a class to the parent <li>.

This is the simplest solution I can think of.


Solution:2

have a look at these two pages:

asp.net mvc and css: Having menu tab stay highlighted on selection

An easy way to set the active tab using controllers and a usercontrol in ASP.NET MVC?


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »