탭메뉴 세개 사용하고 싶습니다.
본문
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs_open
여기에 탭메뉴 박스가 하나 있는데,
동일하게 다른 내용으로 탭메뉴 박스를 두개 더 쓰고 싶은데...
어떻게 스크립트를 수정해야 될까요? ㅠㅠ
총 3개의 탭메뉴가 필요합니다.
고수님들 부탁드립니다..
답변 1
단순한 방법은 아래처럼 추가
3번째도 마찬가지로 숫자 2븥은거만 3으로 변경 하면 될듯요.
.tabcontent2 {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<div class="tab">
<button class="tablinks2" onclick="openCity2(event, 'London2')" id="defaultOpen2">444</button>
<button class="tablinks2" onclick="openCity2(event, 'Paris2')">555</button>
<button class="tablinks2" onclick="openCity2(event, 'Tokyo2')">666</button>
</div>
<div id="London2" class="tabcontent2">
<h3>444</h3>
<p>44444</p>
</div>
<div id="Paris2" class="tabcontent2">
<h3>555</h3>
<p>55555</p>
</div>
<div id="Tokyo2" class="tabcontent2">
<h3>666</h3>
<p>66666</p>
</div>
<script>
function openCity2(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent2");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks2");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen2").click();
</script>
감사합니다. 해결했습니다!
답변을 작성하시기 전에 로그인 해주세요.