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

我已经创建了3个按钮，每个按钮后面都有一段内容，当单击一个按钮时，它会在它后面的段落中淡出，并向单击的按钮添加一个活动类。目前，我已经成功地实现了淡入淡出功能，但我似乎无法从上一个单击的按钮中删除活动类，有人能告诉我这可能是哪里出了问题吗？此外，可能还有一种更简单/更好的方法来产生我正在努力实现的效果，因此所有的建议/帮助/建议都非常受欢迎

小提琴：

谢谢

---

Kyle

尝试从所有

链接中删除
.active
类。单击我
链接，然后将
.active
类添加到当前单击的链接中：

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


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

您还可以进行一些优化，因为将反复使用相同的选择器：

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

以下是对上述优化的JSFIDLE的更新：