Changing a sprite based on the class I have a navigation, with a sprite that changes based on the class. In my jQuery, I'm clearing out the classes so it will just have .nav and then addClass the right class based on the click.  It works but feels very redundant. Does anyone have suggestions on optimizing this?

HTML: 

&lt;div class="grid_12 nav home"&gt;
            &lt;ul class="tabs"&gt;
                &lt;li class="home"&gt;&lt;a href="javascript:;"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                &lt;li class="game-stats"&gt;&lt;a href="javascript:;"&gt;GAME STATS&lt;/a&gt;&lt;/li&gt;
                &lt;li class="game-talk"&gt;&lt;a href="javascript:;"&gt;GAME TALK&lt;/a&gt;&lt;/li&gt;
                &lt;li class="game-info"&gt;&lt;a href="javascript:;"&gt;GAME INFO&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;


JS:

$('DIV.content DIV.nav ul li.home').click(function(){
    $('DIV.content DIV.nav').attr('class', 'nav');
    $('DIV.content DIV.nav').addClass('home');
});

$('DIV.content DIV.nav ul li.game-stats').click(function(){
    $('DIV.content DIV.nav').attr('class', 'nav');
    $('DIV.content DIV.nav').addClass('gamestats');
});

$('DIV.content DIV.nav ul li.game-talk').click(function(){
    $('DIV.content DIV.nav').attr('class', 'nav');
    $('DIV.content DIV.nav').addClass('gametalk');
});
$('DIV.content DIV.nav ul li.game-info').click(function(){
    $('DIV.content DIV.nav').attr('class', 'nav');
    $('DIV.content DIV.nav').addClass('gameinfo');
});
You can add both classes at once with attr, since all you need to do is pass a string with the classes you want separated by spaces:

$('DIV.content DIV.nav ul li.home').click(function(){
    $('DIV.content DIV.nav').attr('class', 'nav home');
});