chatGPT가 탭소스를 하나 짜줬는데....

chatGPT가 탭소스를 하나 짜줬는데....

QA

chatGPT가 탭소스를 하나 짜줬는데....

본문

처음 접속 시, 탭1,2,3의 내용이 모두 보이네요.

처음 접속 시, 탭1의 내용만 보이고 탭1이 활성화된 상태로 보이게 하려면 ?

이 질문에 댓글 쓰기 :

답변 2


<html>
  <head>
    <style>
      /* Add some styles for the tabs */
      .tabs {
        display: flex;
        justify-content: space-between;
        height: 40px;
        background-color: #ddd;
      }
      .tab {
        width: 33.33%;
        text-align: center;
        line-height: 40px;
      }
      /* Add some styles for the tab content */
      .tab-content {
        height: 300px;
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="tabs">
      <div class="tab" data-tab="1">Tab 1</div>
      <div class="tab" data-tab="2">Tab 2</div>
      <div class="tab" data-tab="3">Tab 3</div>
    </div>
    <div class="tab-content" data-content="1">
      Content of Tab 1
    </div>
    <div class="tab-content" data-content="2">
      Content of Tab 2
    </div>
    <div class="tab-content" data-content="3">
      Content of Tab 3
    </div>
    <script>
      // Add some JavaScript to handle the swipe gesture
      const tabs = document.querySelectorAll('.tab');
      const tabContents = document.querySelectorAll('.tab-content');
      let activeTab = 1;
      tabs.forEach(tab => {
        tab.addEventListener('click', () => {
          activeTab = parseInt(tab.getAttribute('data-tab'));
          tabs.forEach(tab => {
            tab.classList.remove('active');
          });
          tabContents.forEach(tabContent => {
            tabContent.style.display = 'none';
          });
          tab.classList.add('active');
          document.querySelector(`[data-content="${activeTab}"]`).style.display = 'block';
        });
        tabContents.forEach(tabContent => {
            tabContent.style.display = 'none';
        });
        document.querySelector(`[data-content="${1}"]`).style.display = 'block';
      });
    </script>
  </body>
</html>

내용 전부 display를 none으로 하고 첫번째만 block 해봤어요

뒷북입니다만 이건 리스너이벤트 보다는 클래식이벤트로 만들고 가장 마지막에

tap1.onclick() 을 주는게 기장 간명할 것 같습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

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