jQuery Add / remove class on nav
<p>How can I create different classes on my links so they can show different images when you click on them?</p>

<p>The idea is that the links has its own color and when it is active there must be a little arrow with the same color.</p>

<p>This is what I have so far:</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;ul&gt;
    &lt;li class="red"&gt;&lt;a href="#"&gt;Link one&lt;/a&gt;&lt;/li&gt;
    &lt;li class="blue"&gt;&lt;a href="#"&gt;Link two&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>.red {background-color:#f00; }
.red_bnt { background-image:url(image/red_bnt_pil.png); }

.blue {background-color:#00f; }
.blue_bnt { background-image:url(image/red_bnt_pil.png); }
</code></pre>

<p><strong>jQuery:</strong></p>

<pre><code>&lt;script type="application/x-javascript"&gt;

$('.red').click(function(){
    $('.red').removeClass('red_bnt');
    $(this).addClass('red_bnt');
});

&lt;/script&gt;
</code></pre>

<p>And then repeat it for the blue as well.</p>

<p>But it is not working ...</p>

<p>what am I doing wrong?</p>
