Question

我已经创建了一个自定义Jquery选项卡，它工作正常，但我需要一个小的更改，我不需要fadeIn效果第二次单击当前选项卡项意味着需要$(".tab_container")正常显示。我怎样才能做到这一点？

//custom tab

$(".tab_container").hide();
$('.tab_container:first').show();
$('.tab ul li a').click(function () {
    var tab = $(this).attr("href");
    $('.tab ul li a').removeClass('active');
    $(".tab_container").hide();
    $(this).addClass('active');
    $(tab).fadeIn();
    return false;
});

小提琴：http://jsfiddle.net/nikhilvkd/h5maycuc/

Answer 1

我已更新您的代码，如下所示。我添加了一个名为“currentTab”的额外变量，它将保存当前选项卡名称。单击选项卡时，使用变量“currentTab”检查所选选项卡的时间。如果条件为真，则使用jquery show（）方法而不是fadeIn（）来显示选项卡。否则使用fadeIn（）方法并使用新选择的选项卡名称更新“currentTab”变量。

var currentTab=$('.tab ul li a:first').attr("href");

    $(".tab_container").hide();
    $('.tab_container:first').show();
    $('.tab ul li a').click(function () {
        var tab = $(this).attr("href");
        $('.tab ul li a').removeClass('active');
        $(".tab_container").hide();
        $(this).addClass('active');
        if(currentTab==$(this).attr("href"))
        {
            $(tab).show();
        }
        else
        {
             $(tab).fadeIn();
            currentTab=$(this).attr("href");
        }
        return false;
    });

禁用淡入效果第二次单击该元素时生效

1 个答案: