javascript切換顯示和隱藏多個div元素

Question

我在頁面上有兩個div（id為MAY和JUNE），在頁面上有兩個按鈕。 該頁面首先顯示May div，使用CSS顯示隱藏June div：無

我正在嘗試創建正確的JavaScript，以便在兩者之間進行切換，但是（在這里搜索之后）我只能設法使它們起作用。

Codepen顯示問題是https://codepen.io/billteale/pen/zwBBez

<a href="#" id="button" >MAY</a>
<a href="#" id="button" >JUNE</a>
<!-- first div, shows on page load -->
<div id="MAY">
      <div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>May 2017</strong></h1>
     </div>
<!-- second div, hidden originally -->
  <div class="hidden" id="JUNE"> 
      <div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>June 2017</strong></h1>
      </div>

...而目前的js是

var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
  var div = document.getElementById('MAY');
  if (div.style.display !== 'none') {
    div.style.display = 'none';
  }
  else {
    div.style.display = 'block';
  }
};

最終，我將有四個或更多的div切換，每個按鈕顯示其相關的div，並隱藏其他div。

誰能告訴我如何添加到這里的代碼中，以使該功能適用​​於多個元素？

Answer 1

可以通過在錨標記的href屬性中設置div ID並隱藏相應的div來完成。 可以在不使用任何額外腳本的情況下對任意數量的div進行操作，只需將新的div ID添加到新的錨標簽href 。 您應該為所有div的like month提供一個通用類，以全部選擇它們。

 $("a.btn").click(function() { var id = $(this).attr("href"); $("div.month:visible").hide(); $(id).show(); }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#MAY" class="btn" id="button-may">MAY</a> <a href="#JUNE" class="btn" id="button-june">JUNE</a> <!-- first div, shows on page load --> <div id="MAY" class="month"> <div style="background-color: lightgrey"> <h1 style="padding: 5px"><strong>May 2017</strong></h1> </div> </div> <!-- second div, hidden originally --> <div class="month hidden" id="JUNE"> <div style="background-color: lightgrey"> <h1 style="padding: 5px"><strong>June 2017</strong></h1> </div> </div> 

Answer 2

 div.style.visibility = "hidden"

這將完全隱藏您的div。 我很確定這是您要的

除此之外，您還可以創建一個單獨的函數，然后將clock添加到div

 <div onclick="nameoffunction()"></div>

該函數可以接受一個參數，並且每個div單擊功能可以具有其id的參數

Answer 3

您的div搞砸了！ 該代碼段現在在jQuery的幫助下工作。

 $("#JUNE").hide(); $("#MAY").show(); $('#button-may').on("click", function() { $("#JUNE").hide(); $("#MAY").show(); }); $('#button-june').on("click", function() { $("#JUNE").show(); $("#MAY").hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" id="button-may">MAY</a> <a href="#" id="button-june">JUNE</a> <!-- first div, shows on page load --> <div id="MAY"> <div style="background-color: lightgrey"> <h1 style="padding: 5px"><strong>May 2017</strong></h1> </div> </div> <!-- second div, hidden originally --> <div class="hidden" id="JUNE"> <div style="background-color: lightgrey"> <h1 style="padding: 5px"><strong>June 2017</strong></h1> </div> </div> 

Answer 4

首先，向要切換的每個div添加一個“ div-toggle”類。 之后，您將單擊事件綁定到按鈕上，從而觸發一個將標識符作為參數的函數。

該函數將遍歷您的div，並將具有參數id的一個設置為可見，然后隱藏其他的。

這樣，您可以添加更多的div進行切換。 您只需要用“ div-toggle”類標記它們，設置它們的ID並創建它們各自的按鈕即可。

 var divs = document.getElementsByClassName('div-toggle'); function toggle(id) { for (var i = 0; i < divs.length; i++) { var div = divs[i]; if (div.id == id) div.style.display = 'block'; else div.style.display = 'none'; } } 

 <a href="#" onclick="toggle('MAY')" >MAY</a> <a href="#" onclick="toggle('JUNE')" >JUNE</a> <!-- first div, shows on page load --> <div class="div-toggle" style="display:block;" id="MAY"> <div style="background-color: lightgrey"> <h1 style="padding: 5px"><strong>May 2017</strong></h1> </div> </div> <!-- second div, hidden originally --> <div class="div-toggle" style="display:none;" id="JUNE"> <div style="background-color: lightgrey"> <h1 style="padding: 5px"><strong>June 2017</strong></h1> </div> </div>