Adding and Removing Multiple Classes
<p>I want to add/remove three  css classes plus a default classes. Example: When I click on the first anchor it adds a new class called style1 and removes the default style, when I click on the second anchor it removes style1 and adds style2, and the same for anchor3.</p>

<p>The problem is if I start by clicking on anchor3, nothing happens, I cannot reverse the action.</p>

<p>How can I make this work so that the add/remove classes works regardless of which link I click first? I need to use the three styles but also need a default style.</p>

<p>Here is the code on JFiddle: <a href="http://jsfiddle.net/VadUE/2/" rel="nofollow">http://jsfiddle.net/VadUE/2/</a></p>

<p>It works in the browser but not on JFiddle.</p>

<p>Code:</p>

<pre><code>$(document).ready(function() {
    $('.anchor1').click(function() {
        $('p').addClass('style1').removeClass('default');
        $('.anchor2').click(function() {
            $('p').addClass('style2').removeClass('style1');
            $('.anchor3').click(function() {
                $('p').addClass('style3').removeClass('style2');
            });
        });
    });
});


&lt;style type="text/css"&gt;
.style1{
    color: #FF8000;
}
.style2{
    color: #F36;
}

.style3{
    color: #00F;
}

.default{
    color: #0C0;
}
&lt;/style&gt;


&lt;a class="anchor1" href="#/"&gt;Link1&lt;/a&gt;
&lt;a class="anchor2" href="#/"&gt;Link2&lt;/a&gt;
&lt;a class="anchor3" href="#/"&gt;Link3&lt;/a&gt;
&lt;p class="default"&gt;This is a sequence into a sound&lt;/p&gt;
</code></pre>
