Question

我有一个垂直标签，工作正常。但我在这里面临一个问题。当我再次单击选项卡时，我需要隐藏此选项卡，类似于切换。

如果我单击选项卡2，它会打开它的内容，但是如果我再次单击选项卡2它就会消失并变得正常。因为我在jQuery中不是很擅长，所以我找不到如何做到这一点，或者我不确定这是否可行。

JS

$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
    $('#tabs li a').click(function(e) {
        e.preventDefault();
        if ($(this).attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $( $(this).attr('href')).fadeIn(); // Show content for current tab
        }
    });
});

提前致谢。

Answer 1

您没有在if语句中查看正确的项目：您正在查找a项的ID，而不是li。

请参阅更新：http://jsfiddle.net/5ezT3/53/

$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
    $('#tabs li a').click(function(e) {
        e.preventDefault();
        if ($(this).parent().attr("id") == "current"){ //detection for current tab
            $($(this).attr('href')).fadeToggle();
            return;
        }
        else{             
            $("#content div").hide(); //Hide all content
            $("#tabs li").attr("id",""); //Reset id's
            $(this).parent().attr("id","current"); // Activate this
            $( $(this).attr('href')).fadeToggle(); // Show content for current tab
        }
    });
});

如@urbz所述，fadeIn / out已更改为fadeToggle以允许多次打开和关闭

Answer 2

Nicolas R的答案很棒，但如果我再次点击Tab1，相应的内容就不会显示出来。也许是他赶紧错过了。重置您的ID：

    $(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
    $('#tabs li a').click(function(e) {
        e.preventDefault();
        if ($(this).parent().attr("id") == "current"){ //detection for current tab
            $($(this).attr('href')).fadeOut();
            $("#tabs li").attr("id",""); //Also Reset id's here.
            return;
        }
        else{             
            $("#content div").hide(); //Hide all content
            $("#tabs li").attr("id",""); //Reset id's
            $(this).parent().attr("id","current"); // Activate this
            $( $(this).attr('href')).fadeIn(); // Show content for current tab
        }
    });
});

切换选项卡内容

2 个答案: