Question

嗨我有几个按钮，第一个是显示/隐藏，它在第一次点击时正常工作。第二个是下一个表，当点击下一个表时，它应该隐藏表1并且只显示表2.然后，如果单击隐藏按钮，它应该隐藏table1和table2，当前表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 accordian。

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

在你的小提琴中，你没有使用jquery。在jquery中显示和隐藏元素非常简单，并且可以减少代码。

Answer 4

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

Answer 5

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

我对您的HTML进行了一些更改，但主要是关于javascript。以下是一些非常简单的jQuery，它可以为页面上的无限组toggleable对象执行您想要的操作。 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);

javascript显示/隐藏按钮

5 个答案: