탭메뉴 세개 사용하고 싶습니다.

탭메뉴 세개 사용하고 싶습니다.

QA

탭메뉴 세개 사용하고 싶습니다.

본문

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs_open

 

여기에 탭메뉴 박스가 하나 있는데,

동일하게 다른 내용으로 탭메뉴 박스를 두개 더 쓰고 싶은데...

어떻게 스크립트를 수정해야 될까요? ㅠㅠ

총 3개의 탭메뉴가 필요합니다.

고수님들 부탁드립니다..

이 질문에 댓글 쓰기 :

답변 1

단순한 방법은 아래처럼 추가
3번째도 마찬가지로 숫자 2븥은거만 3으로 변경 하면 될듯요.

style 추가

.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 추가

<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>
답변을 작성하시기 전에 로그인 해주세요.
전체 94
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT