我在页面上有两个 div（ID 是五月和六月），页面上有两个按钮。该页面首先显示 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，并隐藏其他按钮。
谁能告诉我如何添加到我这里的代码中以使其适用于多个元素？
这可以通过div在锚标签的href属性中设置id来完成，并在隐藏其余部分的同时显示相应的 div。它可以在div没有额外脚本的情况下对任意数量的's完成，只需将新的divid添加到新的锚标签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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句