Toggle Link/button Color On New Button Click

I am trying to import some customized buttons into a marketing survey application. I would like to set up some buttons styled with CSS and Jquery with some specific functionality.

Solution 1:

First, you've got two elements with the same id; this is invalid HTML: an id must be unique within the document. If you want several elements to share the same styles, use a class-name instead. That said, I've amended your HTML to:

<a href="#" class="button">Test Link 1</a>
<a href="#" class="button">Test Link 2</a>

As for your jQuery I'd suggest:

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

JS Fiddle demo.

The above assumes the elements will always be siblings; if they may not be:

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

JS Fiddle demo.

References:

• addClass().
• click().
• Element identifiers: the id and class attributes (W3.org).
• event.preventDefault().
• removeClass().
• siblings().

Solution 2:

$(document).ready(function(){
     $('a').click(function(){
         // reset all buttons to un-clicked state
         $('a').removeClass('clicked');
         $(this).toggleClass('clicked');
     });
});