Question

我创建了3个按钮，每个按钮后面都有一段内容，当单击一个按钮时，它会在其后面的段落中淡入淡出，并为该单击的按钮添加一个活动类。目前我已经设法实现淡入和淡出，但我似乎无法从之前点击的按钮中删除活动类，任何人都可以建议我可能出错的地方吗？还有一种更简单/更好的方式来创造效果我努力工作所以所有建议/帮助/建议都非常受欢迎。

小提琴：http://jsfiddle.net/kyllle/nZFUP/3/

由于凯尔

Answer 1

尝试从所有.active个链接中删除.clickMe类，然后将.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');
    });
});

以下是对上述优化的jsfiddle的更新：http://jsfiddle.net/nZFUP/4/

在淡入和淡出内容时从先前单击的元素中删除活动类

1 个答案: