How to apply css class to an html element using jquery in ASP .NET MVC?

Question

Hi,

Im trying to implement a tab menu just like the one in stackoverflow. I created html list and style them to look like tab menus using CSS. I put the html list on the master page. Now the problem is that How do you change the color of the list once it's clicked by the user? For example, If you click the stackoverflow "Users" tab menu, it will redirect you to the Users index view, and then change the color of the tab menu to orange. How do I achieve this?

Thanks In Advance.

RWendi

Answer 1

You can use the follwoing funcitons to add/remove classes:

$("#MyElement").addClass(classname);
$("#MyElement").removeClass([classname]);
$("#MyElement").toggleClass(classname);

You can pass a parameter to removeClass, or leave it blank

http://docs.jquery.com/Attributes/toggleClass

Answer 2

The HTML source for the top level navigation on SO looks like this when in the Questions area:

<ul>
    <li class="youarehere"><a href="/questions">Questions</a></li>
    <li><a href="/tags">Tags</a></li>
    <li><a href="/users">Users</a></li>
    <li><a href="/badges">Badges</a></li>
    <li><a href="/unanswered">Unanswered</a></li>
</ul>

Notice the youarehere class attached to the li element containing the Questions text. The CSS definition behind that class turns the "button" orange. The youarehere class (or its equivalent for your project) could be added by server code in your master page or, as James Wiseman pointed out, via jQuery in the browser.

Answer 3

You dont and shouldnt use Jquery for this. The reason being is there is no clear reason from your description to actually use Javascript.

What you need to do on your master page is dynamically set the class of the current pages button to something like:

<li class="selected">Home</li>
<li>Users</li>
...

You can find out the current URL by accessing

Request.Url

Then simply create a CSS class to show the change

No need for javascript here. I love JQuery too, but too often people try and find excuses for using it, rather than using a simple more accessible solution. Remember not everyone can use Javascript

Answer 4

I can't speak for SO but the way this usually works is by generating different HTML for each page along the lines of:

<ul class="tabs>
  <li><a href="/tab1">Tab 1</a></li>
  <li class="on"><a href="/tab2">Tab 2</a></li>
  <li><a href="/tab3">Tab 3</a></li>
</ul>

Where class="on" represents your different styling for your selected tab. Now you don't really want to do this for every page so you can place it in your master page like:

<ul class="tabs>
  <li <%= ViewData["CurrentTab"] == "Tab1" ? "class=\"on\"" : "" %>><a href="/tab1">Tab 1</a></li>
  <li <%= ViewData["CurrentTab"] == "Tab2" ? "class=\"on\"" : "" %><a href="/tab2">Tab 2</a></li>
  <li <%= ViewData["CurrentTab"] == "Tab3" ? "class=\"on\"" : "" %>><a href="/tab3">Tab 3</a></li>
</ul>

Then in each of your controller actions set the value of the tab you want to be selected like:

ViewData["CurrentTab"] = "Tab2";

You could test for the current URL in the Master page but this method offers a little bit more flexibility if multiple URLs should highlight the same tab.

I don't see the need for client side setting but if you needed to use JQuery like James Wiseman said:

$("#Tab1").addClass('on');  // or
$("#Tab1").removeClass('on');  // or
$("#Tab1").toggleClass('on');