Question

我可以使用jquery显示带有以下代码的链接标签的表。

 $(document).ready(function()
{
    $("#show").click(function()
    {
        $("#table").show();
    });
});

但是当我想为一个按钮执行此操作时，它将显示该表一秒钟然后它将被隐藏。这些是按钮的代码：

$(document).ready(function()
{
    $("#button").click(function()
    {
        $("#table").show();
    });
});

更新：

    $(document).ready(function()
{
    $("#table").hide();
    $("#button").click(function()
    {
        $("#table").show();
    });

});

以下是代码：

    <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $("#table").hide();
    $("#button").click(function()
    {
        $("#table").show();
    });

});
</script>
</head>

<body>
<p><a href="#" id="show">Show</a> <a href="#" id="hide">Hide</a></p>
<form id="form1" name="form1" method="post" action="">
  <p>
    <input type="submit" name="button" id="button" value="Show" />
  </p>
  <p>&nbsp; </p>
</form>
<table width="515" border="0" class="table1" id="table">
  <tr>
    <td width="509" class="table1"><img src="Image/Tulips.jpg" width="400" height="400" alt="Tulips" /></td>
  </tr>
</table>

Answer 1

你的代码工作得很好，也许你的目标是toggle：Demo

我刚刚将.show()更改为.toggle()

$(document).ready(function()
{
    $("#button").click(function()
    {
        $("#table").toggle();
    });
});

<强>更新问题是您在按钮上使用type="submit"导致表单被提交...将其更改为type="button"

另一种方式（保持type="submit"）：

$(document).ready(function()
{
    $("#table").hide();
    $("#button").click(function()
    {
        $("#table").show();
        return false;           
    });

});

我添加了return false;以阻止按钮默认操作。

Answer 2

$(document).ready(function()
{
    $("#button").click(function()
    {
        $("#table:hidden").show();
        $("#table:visible").hide();
    });
});

或者：

$(document).ready(function()
{
    $("#button").click(function()
    {
        $("#table").toggle();
    });
});

编辑根据您的评论中指定：

$(document).ready(function()
{
    $("#button").click(function()
    {
        $("#table").show();
        setTimeout(function()
        {
            $("#table").hide();
        }, 2000);
    });
});

该表格将显示2000毫秒（2秒）并随后隐藏。

Answer 3

在这里使用if语句。

0＆＃34;＆GT;然后你的表标签就在这里。我们可以使用上面的javascript，但是，如果提交按钮有一些动作要做，它就不知道要调用哪个动作..隐藏表或执行提交按钮后给出的任务。所以使用上面的if语句。它对我来说就像一个魅力！：）

用点击按钮隐藏表格

3 个答案: