使用 jQuery show() / hide()

Question

我在我的 jsp 页面中使用show()和hide() ，它工作正常，但是我无法找到一种方法来隐藏我的表格一旦显示。 HTML EX：

<button id="b1">show 1</button>
<button id="b2">show 2</button>
<div class="hidden" id="d1">
<div class="hidden" id="d2">

所以基本上我想在单击button1时显示div1 ，并在单击button2时显示div2 。 我正在使用hide() / show()因为我不想同时显示两者。 所以这是我的脚本：

  $('#b1').click(function(){
    $('#d1').show();
    $('#d2').hide();
  });

  $('#b2').click(function(){
    $('#d2').show();
    $('#d1').hide();
  });

所以这很好用，一次只显示一个，但我想添加一些脚本来使它在显示div2的地方，我可以点击button2并隐藏div2 ，同样的事情div1 。 我知道这很令人困惑，所以如果您有任何问题，请提出。 谢谢。

Answer 1

我想你想要这个：

$('#b1').click(function(){
    $('#d1').toggle();
});

$('#b2').click(function(){
    $('#d2').toggle();
});

如果您仍然需要这样做以便只能显示一个，那么可能是这样的：

$('#b1').click(function(){
    if($('#d1').toggle().is(":visible")){
       $('#d2').hide();
    }
});

$('#b2').click(function(){
    if($('#d2').toggle().is(":visible")){
       $('#d1').hide();
    }
});

Answer 2

我想你需要这个

$('#b1').click(function(){
    $('#d2').hide();
     $('#d1').toggle();
});

$('#b2').click(function(){
     $('#d1').hide();
     $('#d2').toggle();

});

Answer 3

您无需检查任何内容，只需切换第一个并始终隐藏另一个

$('#b1').click(function(){
    $('#d1').toggle();
    $('#d2').hide();
});

$('#b2').click(function(){
    $('#d2').toggle();
    $('#d1').hide();
});

Answer 4

您可以使用一个toggle()方法来代替 show/hide 为您执行此操作。

没有参数，.toggle() 方法只是切换元素的可见性：

来源： http://api.jquery.com/toggle/

Answer 5

  $('#b1').click(function(){
    $('#d1').toggle();
  });

  $('#b2').click(function(){
    $('#d2').toggle();
  });

Answer 6

如果您不使用任何 animation，则在 css 中定义 class 并切换它可能更有用。

因此，您的代码可以是这样的：

$("#b1, #b2").click(function() { $("#d1, d2").toggleClass("hidden") })

如果你愿意，试试这个，并告诉我们它是否有效）

Answer 7

您可以检查此$('#someDiv:visible')是否可见某些内容，然后进行适当的处理。