mutlple jquery切换如何返回默认值？

我有2个click elements div-click1、click2和3个content elements表-默认值、表1、表2

单击click1时，它会根据需要隐藏默认值和表2，并显示表1，单击2会隐藏其他表，并显示表2

如果所有的表1和表2都被隐藏，我希望有默认的显示，但它不是这样的

我能想出的最好的办法是行不通的：

$( "#default:hidden" ) && $( "#table1:hidden" ) && $( "#table2:hidden" ) {
    $( "#default" ).show();
});

html:

JS:

---

这是我的小提琴：

有很多方法可以做到这一点

看看这把小提琴，我想它能满足你的需要

我创建了一个函数，该函数将检查当前元素是否可见，并相应地隐藏/显示，或者如果两个元素都隐藏，它将显示默认值：

function toggleInfoTable(element)
{
    //see if the element is visible:
    var vis = element.is(":visible")
    //hide all tables first 
    $(".info-table").hide();
    if (vis)
    {
        //it was visible, it's hidden now so show the default:
        $("#default").show("slow");
    }
    else
    {
        //all elements hidden show this element.
        element.show("slow");
    }
}

然后可以在on click事件中调用该函数，如下所示：

$( "#click2" ).click(function() {
    toggleInfoTable($( "#table2" ))
});

一种方法是：

// binding a click-handler to all <div> elements whose 'id' starts with
// 'click':
$('div[id^=click]').on('click', function () {
    // getting the numbers from the end of the 'id' string:
    var num = (/\d+$/).exec(this.id);

    // if there is a num, and it's a base-10 number:    
    if (num && parseInt(num, 10)) {
        // the <table> we're toggling is:
        var table = $('#table' + num);
        // we toggle that <table>,
        // then find its sibling elements, and hide them:
        table.toggle('slow').siblings().hide('slow');

        // then we select the '#default' <table> and, if the <table> we
        // toggled is ':hidden' we show the '#default', otherwise we hide it:
        $('#default').toggle('slow', table.is(':hidden'))
    }
});

参考资料：

JavaScript: . . . jQuery： . . . .

---

就我个人而言，我会设置一些活动的、非活动的标志变量，并检查按钮点击上的那些变量，以确定要采取的行动。为了简洁起见，我在下面只展示了一个函数，相同的格式适用于这两个函数，并且JSFIDLE正确地实现了这两个函数

有关标志变量方法，请参见此示例：

---

它在2和看起来干净之间切换，但是我正在寻找返回默认视图的东西。它看起来很棒，谢谢你的回答，如果我能将它们全部标记为正确的话，我会的！它看起来很棒，谢谢你的回答，如果我能把它们都标记为正确的话，我会的！

function toggleInfoTable(element)
{
    //see if the element is visible:
    var vis = element.is(":visible")
    //hide all tables first 
    $(".info-table").hide();
    if (vis)
    {
        //it was visible, it's hidden now so show the default:
        $("#default").show("slow");
    }
    else
    {
        //all elements hidden show this element.
        element.show("slow");
    }
}

$( "#click2" ).click(function() {
    toggleInfoTable($( "#table2" ))
});

// binding a click-handler to all <div> elements whose 'id' starts with
// 'click':
$('div[id^=click]').on('click', function () {
    // getting the numbers from the end of the 'id' string:
    var num = (/\d+$/).exec(this.id);

    // if there is a num, and it's a base-10 number:    
    if (num && parseInt(num, 10)) {
        // the <table> we're toggling is:
        var table = $('#table' + num);
        // we toggle that <table>,
        // then find its sibling elements, and hide them:
        table.toggle('slow').siblings().hide('slow');

        // then we select the '#default' <table> and, if the <table> we
        // toggled is ':hidden' we show the '#default', otherwise we hide it:
        $('#default').toggle('slow', table.is(':hidden'))
    }
});

var table1 = 0, table2 = 0;
$( "#click1" ).click(function() {
    if(table1 == 0) {
        //show + hide
        $( "#table1" ).show("slow");
        $( "#table2" ).hide("slow");
        $( "#default" ).hide("slow");
        //set flags
        table1 = 1;
        table2 = 0;
    }
    else {
        //show + hide
        $( "#default" ).show("slow");
        $( "#table2" ).hide("slow");
        $( "#table1" ).hide("slow");
        //set flags
        table1 = 0;
        table2 = 0;
    }
});