Question

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.

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

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.

Here is the code on JFiddle: http://jsfiddle.net/VadUE/2/

It works in the browser but not on JFiddle.

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');
            });
        });
    });
});


<style type="text/css">
.style1{
    color: #FF8000;
}
.style2{
    color: #F36;
}

.style3{
    color: #00F;
}

.default{
    color: #0C0;
}
</style>


<a class="anchor1" href="#/">Link1</a>
<a class="anchor2" href="#/">Link2</a>
<a class="anchor3" href="#/">Link3</a>
<p class="default">This is a sequence into a sound</p>

Answer 1

1. In your jsfiddle, you have chosen the mootools library.
2. In the ready method you are nesting all click actions.
3. If you remove a class, the classname to remove has to be retrieved.

Fixing this (and removing the need for ready call by placing the script at the bottom of the page), you end up with:

$('.anchor1').on('click',function(){
    $('p').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style1');
});
$('.anchor2').click(function(){
    $('p').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style2');
});
$('.anchor3').click(function(){
    $('p').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style3');
});

See jsfiddle

Using a single className for the links and adding an numeric id you would only need one handler:

$('.anchor').on('click',function(){
    $('p').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style'+this.id);
});​

See jsfiddle