淡入和淡出内容时，从上一个单击的元素中删除活动类

Question

I've created 3 buttons with a paragraph of content after each, when a button is clicked this will fade in the paragraph that follows it as well as adding an active class to that clicked button. At the moment I have managed to achieve the fade in and fade out but i dont seem to be able to remove the active class from the previous clicked button, can anyone advise where I might be going wrong with this? also there is probably an easier/better way to create the effect Im working towards so all advice/help/suggestions are really welcome.

Fiddle: http://jsfiddle.net/kyllle/nZFUP/3/

Thanks Kyle

Answer 1

Try removing the .active class from all of the .clickMe links, then add the .active class to the currently clicked link:

$(document).ready(function() {
    $('.clickMeInfo').hide();


    $('.clickMe').click(function() {
        $('.clickMeInfo').fadeOut('fast');
        $(this).next('.clickMeInfo').fadeIn('fasst');
        $('.clickMe').removeClass('active');
        $(this).addClass('active');
    });
});

You could also do some optimization since the same selectors will be used over and over:

$(document).ready(function() {
    //cache the elements instead of selecting them multiple times
    var $clickMe     = $('.clickMe'),
        $clickMeInfo = $('.clickMeInfo');
    $clickMeInfo.hide();

    $clickMe.click(function() {
        //find the index of the clicked element
        var $this = $(this),
            this_index = $clickMe.index($this);
        //fade-out all the info elements, then select only the clicked index and fade it in
        $clickMeInfo.fadeOut('fast').filter(':eq(' + this_index + ')').fadeIn('fast');

        $clickMe.removeClass('active');
        $this.addClass('active');
    });
});

Here is an update to your jsfiddle of the above optimization: http://jsfiddle.net/nZFUP/4/