.removeClass() not removing class. Possible specificity error
<p>I'm trying to simultaneously add a class to a clicked link, while simultaneously removing that same class from the DOM. The part of the code that adds the class works, but it just makes the class appear again and again. I'm also curious about the efficacy of a javascript solution vs. a server-side solution.     </p>

<pre><code>$(document).ready(function() {
    $(function() {
    $('#header a span').click(function(e) {
    var title = this.innerText; 
    //possible browser compatability from .text?
        $('selected').removeClass('selected');
        $(this).addClass('selected');
        // Also prevent the link from being followed: 
    });
    });

&lt;div id="header" class="ui-corner-all ui-buttonset"&gt;
         &lt;a title="index" href="#" class="link" &gt;&lt;span&gt;home&lt;/span&gt;&lt;/a&gt;
         &lt;a title="code" href="#" class="link" &gt;&lt;span&gt;code&lt;/span&gt;&lt;/a&gt;
         &lt;a title="design" href="#" class="link" &gt;&lt;span&gt;design&lt;/span&gt;&lt;/a&gt;
         &lt;a title="illustration" href="#"class="link" &gt;&lt;span&gt;illustration&lt;/span&gt;&lt;/a&gt;
         &lt;a title="writing" href="#" class="link" &gt;&lt;span&gt;writing&lt;/span&gt;&lt;/a&gt;
         &lt;a title="links" href="#" class="selected" &gt;&lt;span&gt;links&lt;/span&gt;&lt;/a&gt;
         &lt;a title="about" href="#" class="selected"&gt;&lt;span&gt;about&lt;/span&gt;&lt;/a&gt;
         &lt;/div&gt;
</code></pre>
