How to change CSS class of <a> tag using Jquery/Javascript

Question

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.

If you already have a class called "current" that highlights the tab, where's the issue? — j08691
– j08691, Commented Feb 22, 2012 at 16:51

Blender · Accepted Answer · 2012-02-22 16:56:09Z

5

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();

edited Feb 22, 2012 at 16:56

answered Feb 22, 2012 at 16:51

Blender

300k55 gold badges462 silver badges511 bronze badges

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

2 Comments

Surreal Dreams Over a year ago

Don't forget to add the class to the default tab: <li class="MenuDashboard active"><a href="#" >Dashboard</a></li>

Aaron Over a year ago

They can also just use the class current and replace all instances of active in this example.

Collectives™ on Stack Overflow

How to change CSS class of <a> tag using Jquery/Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related