한 페이지에 두 개의 div (id는 MAY 및 JUNE)가 있고 페이지에는 두 개의 버튼이 있습니다. 페이지는 5 월 div를 표시하고 6 월 div는 css 디스플레이를 사용하여 숨겨져 시작됩니다. none
둘 사이를 전환 할 올바른 자바 스크립트를 만들려고하지만 (여기에서 검색 한 후) 하나만 작동하도록 관리 할 수 있습니다.
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를 표시하고 나머지는 숨기는 전환 할 4 개 이상의 div를 갖게됩니다.
누구든지 여러 요소에 대해이 작업을 수행하도록 여기에있는 코드에 추가하는 방법을 알려줄 수 있습니까?
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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다