Question

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.

$(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: 
    });
    });

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

Answer 1

Change your JS to:

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

By the way, do you want your class selected on the span elements, or a elements, your JS indicates span but your html indicates a.