Question

我在页面上有两个div（id＆＃39; s MAY和JUNE）和页面上的两个按钮。页面通过显示May div开始，使用css display：none

隐藏June div

我正在尝试创建正确的javascript，它们将在两者之间切换，但是（在此处搜索之后）我只能设法让一个人工作。

Codepen显示的问题是https://codepen.io/billteale/pen/zwBBez

CopyMemory

......当前的js是

<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>

最终我将有四个或更多的div来切换，每个按钮显示其相关的div，并隐藏其他div。

有人能告诉我如何添加到我这里的代码中，使这个工作适用于多个元素吗？

Answer 1

可以通过在锚标记的div属性中设置href id，并在隐藏其余部分时显示相应的div来完成。可以为任意数量的div执行此操作而无需额外脚本，只需将新的div ID添加到新的锚标记href即可。您应该为所有div提供一个共同的课程，例如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。我很确定这就是你要求的

也可以代替你，你可以创建一个单独的函数并将div添加到div

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

该函数可以接受一个参数，点击功能上的每个div都可以有其id

的参数

Answer 3

你的div搞砸了！该片段现在正在jQuery的帮助下工作。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

首先添加＆＃34; div-toggle＆＃34;要切换的每个div的类。之后，绑定按钮上的单击事件，触发一个以标识符作为参数的函数。

该函数将运行你的div并将参数id设置为可见，并隐藏其他函数。

这样您可以添加更多要切换的div。你只需要使用＆＃34; div-toggle＆＃34;来标记它们。上课时，设置他们的id并创建他们各自的按钮。

＆＃13;

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';
    }
}

＆＃13;

<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>

＆＃13;

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

4 个答案: