title: how to change classes on click
body: <p>I have structure:</p>
  
  <pre><code>&lt;table style="width: 100%;"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;a href="#" class="yy"&gt;one&lt;/a&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;a href="#" class="xx"&gt;Two&lt;/a&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;a href="#" class="xx"&gt;Three&lt;/a&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.xx {
      border: 5px solid green;    
  }
  
  .yy {
      border: 5px solid red;    
  }
  </code></pre>
  
  <p>now on click of <code>&lt;a&gt;</code> it's class should get changed. i.e. if it's 'xx' then it should turn 'yy' and vice-versa, and rest of the <code>&lt;a&gt;</code> should remain as it is,
  I tried something like (ref:<a href="https://stackoverflow.com/questions/3569165/how-to-change-class-of-a-tags-in-jquery">how to change class of &lt;a&gt; tags in jquery</a>)</p>
  
  <pre><code>$("a.xx").click(function() {
    $(".yy").not(this).removeClass("yy");
    $(this).toggleClass("yy");
  });​
  </code></pre>
  
  <p>but it didnt work that way, I tried to tweak the code, but it's not working. Can somebody help.</p>
  
  <p>EDIT:
  May b my question was not clear enough:
  if I click on 2nd <code>&lt;a&gt;</code>/ any other <code>&lt;a&gt;</code> then it should turn red and rest of the tag should be green.i.e. if the <code>&lt;a&gt;</code>is having red color, then it should turn green and and rest of the  should be in red, and vice-versa .</p>
  
  <p>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. –</p>