使用 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')是否可見某些內容，然后進行適當的處理。