如何使用toggle_visibility隱藏div然后在單擊時顯示另一個div

Question

我想在隱藏 div 2 的同時在 html 加載上顯示 div 1，然后使用 onclick 我想交換它們的可見性，例如單擊按鈕隱藏 div1 然后顯示 div2，然后再次單擊時，隱藏 div2 然后顯示 div 1。這是我的代碼：

 function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'none') e.style.display = 'block'; else e.style.display = 'none'; }

 <a href="#" onclick="toggle_visibility('foo');">Hide DIV 1 show DIV 2</a> <div id="foo"> This is DIV 1</div></div> <div id="foo"> This is DIV 2</div></div>

Answer 1

最初將您的div1設置為display:none; 並簡單地切換它們。 我使用類targetElement只是為了擺脫常見的選擇器。 hidden類用於使用默認style display:none; 並替換inline-style .

我想使用button而不是<a href="#">Click here</a> 。 要做到這一點，只需將標簽替換為<button type="button"> Button Name </button>

 $('#toggleButton').on('click',function(){ $('.targetElement').toggleClass('hidden'); });

 .hidden{ display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="toggleButton" href="#">Click here</a> <div id="foo" class="targetElement hidden"> This is DIV 1</div></div> <div id="foo" class="targetElement"> This is DIV 2</div></div>

Answer 2

具有相同 ID 的 2 個元素不是一個好習慣。 ID 應該始終是唯一的。 改用類。 在加載時隱藏 div。 只需在style屬性中將 css 添加到 html 元素。 你也有不必要的</div>標簽被我刪除了。

這是使用 JQuery 的工作代碼（更少的代碼）：

 $("#toggle").on("click", function() { $(".isToggable").toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a id="toggle" href="#" >Hide DIV 1 show DIV 2</a> <div class="isToggable"> This is DIV 1</div> <div class="isToggable" style="display:none"> This is DIV 2</div>

在 html 中，我向要切換的元素添加了類。 我還在a標簽中添加了一個 ID。 在 JQuery 中，我添加了一個事件偵聽器 onclick 使用它的 ID 標記a標簽。 $(".isToggable").toggle(); 獲取頁面中具有“isToggable”類的所有元素來切換它們的可見性。

沒有參數， .toggle() 方法只是切換元素的可見性

有關切換的更多信息： JQuery 切換

---

舊答案（香草javascript）

 function toggle_visibility(id) { var container = document.getElementById(id); for (var i = 0; i < container.children.length; i++) { let currentElem = container.children[i]; if (currentElem.style.display === "none") { currentElem.style.display = "block"; } else { currentElem.style.display = "none"; } } }

 <a href="#" onclick="toggle_visibility('container');">Hide DIV 1 show DIV 2</a> <div id="container"> <div> This is DIV 1</div> <div style="display:none"> This is DIV 2</div> </div>

這是如何工作的，您將要切換可見性的元素放在容器內， toggle_visibility函數將切換內部元素的所有可見性。 這樣，如果您決定添加更多 div，它們都將被處理。

如果您對它的工作原理有任何疑問。 不要猶豫，問。 希望能幫助到你 ！

Answer 3

屬性id在文檔中必須是唯一的。 改用類。

首先使用 CSS 隱藏第二個 div。 然后使用forEach()隱藏/顯示 div。 您還應該避免使用內聯事件處理程序。

嘗試以下方式：

 document.querySelector('a').addEventListener('click',function(){ [].forEach.call(document.querySelectorAll('.foo'), function(el){ if(el.style.display == 'none') el.style.display = 'block'; else el.style.display = 'none'; }); });

 <a href="#">Hide DIV 1 show DIV 2</a> <div class="foo"> This is DIV 1</div></div> <div class="foo" style="display:none;"> This is DIV 2</div></div>