javascript 显示/隐藏按钮答案

【问题标题】：javascript show/hide buttonsjavascript 显示/隐藏按钮
【发布时间】：2023-03-31 17:10:02
【问题描述】：

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

【问题讨论】：

如果您确实在使用 jQuery，您可能想要实际使用它。这将有助于清理您的代码。
你可以用jquery写代码，更干净。

标签： javascript jquery button hide show

【解决方案1】：

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

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

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

【讨论】：

如何添加后退和下一个按钮以隐藏在关联的表格中？这样如果我希望在显示 table1 时禁用后退按钮，并在显示 table2 时禁用下一个按钮？
我不太明白。只有一个按钮“nextbt2”，其标签/值在“返回”和“下一步”之间切换。如果您添加了一个新按钮，您可以使用样式可见性并像使用表格一样显示。
它在 IE8 中不起作用它给出错误 Object does not support this property or method at line container = document.getElementById("container");
我在一台没有 IE8 的旧电脑上。也许它不喜欢具有 id 容器的表？尝试在该表周围添加一个 id=container 的 div。

【解决方案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
    });     
});

这只是基本方法

【讨论】：

【解决方案3】：

看看jquery ui accordian。

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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);

【讨论】：