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.

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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
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?

Improve this answer

2 Comments

Hmmm.. both solutions presented there are huge and tedious in comparison to the seemingly simple task :(
Both of those seem relatively straight forward. Do you not like the hard-coding?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.