Question

I have structure:

<table style="width: 100%;">
    <tr>
        <td>
            <a href="#" class="yy">one</a>
        </td>

    </tr>
    <tr>
        <td>
            <a href="#" class="xx">Two</a>
        </td>

    </tr>
    <tr>
        <td>
            <a href="#" class="xx">Three</a>
        </td>

    </tr>
</table>

CSS:

.xx {
    border: 5px solid green;    
}

.yy {
    border: 5px solid red;    
}

now on click of <a> it’s class should get changed. i.e. if it’s ‘xx’ then it should turn ‘yy’ and vice-versa, and rest of the <a> should remain as it is,
I tried something like (ref:how to change class of <a> tags in jquery)

$("a.xx").click(function() {
  $(".yy").not(this).removeClass("yy");
  $(this).toggleClass("yy");
});​

but it didnt work that way, I tried to tweak the code, but it’s not working. Can somebody help.

EDIT:
May b my question was not clear enough:
if I click on 2nd <a>/ any other <a> then it should turn red and rest of the tag should be green.i.e. if the <a>is having red color, then it should turn green and and rest of the should be in red, and vice-versa .

EDIT for more clear requirement (based on replies from sje397 ):
say I am clicking on a having class xx/yy and i.e. I click on it again it should change i.e. if xx then it should go back to yy, if u again click on it, it should go back to xx. –

Answer 1

$("a").click(function() {
  $(this).toggleClass("yy").toggleClass("xx");
});​

EDIT (due to author’s comment)

If you want to have only one highlighted tag (i.e. having the class ‘yy’) and all others having the class ‘xx’, you can do:

$("a").click(function() {
  var $this = $(this); // this is just for performance
  if(!$this.hasClass('yy'))
    $('.yy').toggleClass("yy").toggleClass("xx");
  $this.toggleClass("yy").toggleClass("xx");
});​

Usually, however, you would use the ‘cascading’ property of css to simplify things. For example, rather than switching classes, just add an additional class to the selected element. Then organise your CSS so that in this more specific case, the display properties which you want for the highlight override. For example, with this CSS:

.xx {
    border: 5px solid green;    
}

.xx.yy {
    border: 5px solid red;    
}

You just need to add and remove the ‘yy’ class and leave the ‘xx’ class alone.