SIR
목록으로

chatGPT가 탭소스를 하나 짜줬는데.... 채택완료

sinbi
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 3,005
답변 2
목록

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

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

#탭 #자바스크립트 #javascript

답변 2개

채택된 답변
+20 포인트

Copy 
<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 해봤어요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

역시 인공지능보단 사람이네요. ㅎ
감사합니다. 잘 작동하네요.
https://codepen.io/sinbi/pen/YzjMjrK

댓글을 작성하려면 로그인이 필요합니다.

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

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

좋은 의견 감사합니다. AI가 짠 코드가 신기해서 질문해 봤어요. ㅎ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고