CODEWITHSUNDEEP
javascriptjqueryhtmlcsshyperlink
user2985093
user2985093

Reputation: 63

Toggle multiple links' button colors on click

My question is similar to the one Robert Anderson asked. That was solved beautifully by David Thomas. Here's that JS Fiddle demo.

$('a.button').click(function(e){
e.preventDefault();
$('a.clicked').removeClass('clicked');
$(this).addClass('clicked'); 
});

But instead of toggling one link color on click, I'd like to toggle three separate colors for three separate link buttons, on each click returning the other links to their default color. Basically exactly what the JS Fiddle does, but toggling three classes rather than one. I'm still a jquery novice and can't make it happen.

More details: these are div links on the page's navbar, so the user isn't navigating to a new page. The idea is that the link button to div1 or div2 will be "lit up" or "colored" on the top nav bar to make clear what section the user is looking at.

Upvotes: 0

Views: 645

Answers (1)

Christian Duvall
Christian Duvall

Reputation: 409

http://jsfiddle.net/f36Wq/26/

Simple way - store the click class you want on a data tag on the link and then retrieve it for use.

$('a.button').click(function(e){
   e.preventDefault();
   $('a').removeClass('clicked clicked2 clicked3');
   var $this = $(this), cls = $this.data('clckcls');
   $(this).addClass(cls);
});

Upvotes: 0

Related Questions