禁用第二次单击元素时的淡入淡出效果

Question

我已经创建了一个自定义 Jquery 选项卡，它工作正常，但我需要一个小改动，我不需要第二次单击当前选项卡项时的淡入效果意味着需要 $(".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;
});

Fiddle : 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;
    });

禁用第二次单击元素时的淡入淡出效果

Disable fade In effect on second click of the element

jquery

tabs