javascript - javascript 显示/隐藏按钮

Question

嗨，我有几个按钮，第一个是显示/隐藏，第一次单击时它可以正常工作。第二个是下一个表，当单击下一个表时，它应该隐藏表 1，只显示表 2。然后如果单击隐藏按钮，它应该隐藏表 1 和表 2，当前表 2 仍然显示当隐藏按钮是点击。这是我的问题和代码的示例：http: //jsfiddle.net/zfnx6/27/

Answer 1

我更新了您的代码，使其行为与您描述的一样，最大的变化是将外部表定义为 table1 和 table2 的容器。这样，单击顶部按钮（显示/隐藏）会同时影响两个表，而不必弄乱两个表的 if 语句。

HTML 中的按钮更改了一些参数，第二个按钮成为两个表格的切换按钮。如果您将使用两个以上的表，则当前方法不会太有效。

演示 http://jsfiddle.net/zfnx6/41/

Answer 2

$(document).ready(function(){
    $("#hide").click(function(){ //#hide use your element id
        $("p").hide();            // use your element to hide
    });
    $("#show").click(function(){ //#show use your element id
        $("p").show();              // use your element to show
    });     
});

这只是基本方法

Answer 3

看看jquery ui 手风琴。

如果您希望一次只显示一个表格，您可能需要考虑使用它。

在你的小提琴中，你没有使用 jquery。在 jquery 中显示和隐藏元素非常容易，并且大大减少了您的代码。

Answer 4

如果您对使用 jQuery 感兴趣，它会大量清理您的代码。这是一个例子：http: //jsfiddle.net/zfnx6/43/

Answer 5

我自己的变体：http: //jsfiddle.net/zb9Tt/

我对您的 HTML 做了一些更改，但主要是关于 javascript。toggleable以下是一些非常轻巧的 jQuery，它将为页面上的无限组对象执行您想要的操作。该类active用于显示当前选择的“选项卡”。

 (function ($) {

    $(document).ready(function () {
        $("#togglebutton").bind("click", function () {
           $(".active, #nextbt").toggle();
        });

        $("#nextbt").bind("click", function () {
            var current = $(".active"); 
            var next = $(".active + .toggleable");

            if (next.length) {
                current.removeClass("active").hide();
                next.addClass("active").show();
            }
        });    
    });    
})(jQuery);