up vote 0 down vote favorite

I am trying to change the class of a tab on the dashboard depending upon the page selected. I have 3 tabs in the dashboard like

<div>
    <ul class="menu">
    <li class="MenuDashboard"><a href="#" >Dashboard</a></li>
    <li class="MenuSearch"><a href="#">Search</a></li>
    <li class="MenuAccountSetup"><a href="#">Account Set up</a></li>
    </ul>
</div>

Now I want to highlight the tab when I select that particular tab. By default the 'Dashboard' tab should be highlighted. I have a style class called "current" which highlights the tab. Please advise.

share|improve this question
If you already have a class called "current" that highlights the tab, where's the issue? – j08691 Feb 22 '12 at 16:51
feedback

1 Answer

up vote 5 down vote

This should work:

$('.menu li').click(function() {
  $(this).addClass('current').siblings().removeClass('current');
});

// Clicks on the first menu item to style it
$('.menu li').eq(0).click();
share|improve this answer
2  
Don't forget to add the class to the default tab: <li class="MenuDashboard active"><a href="#" >Dashboard</a></li> – Surreal Dreams Feb 22 '12 at 16:53
They can also just use the class current and replace all instances of active in this example. – Aaron Feb 22 '12 at 16:55
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.