javascript 切换显示和隐藏多个 div 元素

Question

我在页面上有两个 div(id 为 MAY 和 JUNE)和页面上的两个按钮。该页面首先显示 May div，使用 css display: none 隐藏 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，并隐藏其他的。

任何人都可以告诉我如何添加到我这里的代码中以使其适用于多个元素吗？

Answer 1

这可以通过在 anchor 标记的 href 属性中设置 div id，并显示相应的 div 而隐藏其余部分来完成。它可以为任意数量的 div 完成，无需额外的脚本，只需将新的 div id 添加到新的 anchor 标记 href 即可。您应该为所有 div 提供一个公共(public)类，例如 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>