how to change class of <a> tags in jquery
<p>I have a table structure, something similar to</p>

<pre><code>&lt;table style="width: 100%;"&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;a href="#" class="xx"&gt;one&lt;/a&gt;
        &lt;/td&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;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;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 what I expect is, if I click on 1st row/1st <code>&lt;a&gt;</code> its border will turn to red, and rest of <code>&lt;a&gt;</code> in green, again if I clcik on 1st row/1st <code>&lt;a&gt;</code> it should turn to green. Also if I click on any other <code>&lt;a&gt;</code> then only it should turn to red, but rest of the <code>&lt;a&gt;</code> should be green.</p>

<p>I tried:</p>

<pre><code>$(function () {
    $("a.xx").click(function () {
        if ($(this).hasClass("xx")) {
            $(this).removeClass("xx").addClass("yy");
        } else {
            $(this).removeClass("yy").addClass("xx");
        }
    });
});
</code></pre>

<p>But it's not working.</p>
