jQuery - Add and Remove class
<p>The situation is that I have two buttons that each have a dedicated class. But when I click the about button I want the class to change to the highlightabout class, and then when I click the graph button I want the highlightabout class to revert to the about class and the graph class to change to the highlightgraph class. So they would switch accordingly when I click either button.</p>

<p>I have this script but I don't understand why it isn't working:</p>

<p>HTML:</p>

<pre><code>&lt;div id="wrapper"&gt;
&lt;ul&gt;&lt;li&gt;&lt;a class="about"&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="graph"&gt;&lt;span&gt;Graphic Design&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p></p>

<p>.CSS:</p>

<pre><code>.about { background:url(../button/about_btn.png) no-repeat left center; width:160px; height:50px; float:left;cursor:pointer}
.graph { background:url(../button/graph_btn.png) no-repeat left center; width:160px; height:50px; float:left;cursor:pointer}
.highlightabout {background:url(../button/about_btn.png) no-repeat right center; width:160px; height:50px; float:left; cursor:pointer}
.highlightgraph {background:url(../button/graph_btn.png) no-repeat right center; width:160px; height:50px; float:left; cursor:pointer}
</code></pre>

<p>Script:</p>

<pre><code>$('.about').click(function() {
    $(this).removeClass("about").addClass("highlightabout");
    $('.graph').removeClass("highlightgraph").addClass("graph");
});
$('.graph').click(function() {
    $(this).removeClass("graph").addClass("highlightgraph");
$('.about').removeClass("highlightabout").addClass("about");
});
</code></pre>

<p>Appreciate any help.</p>

<p>UPDATE: Extremely sorry for not adding the HTML, I didn't think it would help. Added the HTML/.CSS now also.</p>
