2

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.

Chris Missal
  • 5,987
  • 3
  • 28
  • 46
Alex
  • 75,813
  • 86
  • 255
  • 348

2 Answers2

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.

Chris Missal
  • 5,987
  • 3
  • 28
  • 46
  • You could probably do the same thing on the server side ... check the request, runat=server on the ul, and add a class to the correct li – Martin Aug 02 '09 at 20:12
0

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?

Community
  • 1
  • 1
Mauro
  • 4,531
  • 3
  • 30
  • 56
  • Hmmm.. both solutions presented there are huge and tedious in comparison to the seemingly simple task :( – Alex Jul 31 '09 at 06:30
  • Both of those seem relatively straight forward. Do you not like the hard-coding? – Martin Aug 02 '09 at 20:36