JavaScript

[자바스크립트] 탭 스위쳐(tab switcher) 만들기, 탭 전환 기능 구현하는 법

paintover23 2023. 10. 29. 13:54
728x90

 

위와 같이 탭을 눌렀을 때 이에 대응되는 콘텐츠 내용이 변화하는 탭 전환 기능을 순수 자바스크립트를 활용해 만들어보고자 한다.

 

[첫번째 시도]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./tab.css" />
  </head>
  <body>
    <main>
      <div class="tabGroup">
        <div id="tab1" class="selected" onclick="changeTab1()">coffee</div>
        <div id="tab2" onclick="changeTab2()">sandwitch</div>
        <div id="tab3" onclick="changeTab3()">juice</div>
        <div id="tab4" onclick="changeTab4()">bagel</div>
      </div>

      <div class="contentGroup">
        <div id="content1" class="show">Americano</div>
        <div id="content2">BLT sandwitch</div>
        <div id="content3">black tea</div>
        <div id="content4">cheese bagel</div>
      </div>
    </main>
    <script type="text/javascript" src="./tab.js"></script>
  </body>
</html>
let t1 = document.querySelector('#tab1');
let t2 = document.querySelector('#tab2');
let t3 = document.querySelector('#tab3');
let t4 = document.querySelector('#tab4');
let c1 = document.querySelector('#content1');
let c2 = document.querySelector('#content2');
let c3 = document.querySelector('#content3');
let c4 = document.querySelector('#content4');

function changeTab1() {
  tab1.className = 'selected';
  tab2.className = '';
  tab3.className = '';
  tab4.className = '';
  c1.className = 'show';
  c2.className = '';
  c3.className = '';
  c4.className = '';
}

function changeTab2() {
  tab1.className = '';
  tab2.className = 'selected';
  tab3.className = '';
  tab4.className = '';
  c1.className = '';
  c2.className = 'show';
  c3.className = '';
  c4.className = '';
}

function changeTab3() {
  tab1.className = '';
  tab2.className = '';
  tab3.className = 'selected';
  tab4.className = '';
  c1.className = '';
  c2.className = '';
  c3.className = 'show';
  c4.className = '';
}

function changeTab4() {
  tab1.className = '';
  tab2.className = '';
  tab3.className = '';
  tab4.className = 'selected';
  c1.className = '';
  c2.className = '';
  c3.className = '';
  c4.className = 'show';
}

 

처음에는 각 탭에 대해 일일히 함수를 적용시켰고, 선택한 탭을 제외한 탭과 본문에 대해서 class의 show를 제거하는 방식으로 시도하였다. 그러나 본인이 느끼기기에도 위 코드는 유지보수에 적합하지 않아 다음 두번째 시도를 통하여 좀 더 유지보수에 편리한 방식으로 코드를 보완하였다.

 

[두번째 시도]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./tab2.css" />
  </head>
  <body>
    <main>
      <div class="tabGroup">
        <div class="tab selected" data-tab="1">coffee</div>
        <div class="tab" data-tab="2">sandwich</div>
        <div class="tab" data-tab="3">juice</div>
        <div class="tab" data-tab="4">bagel</div>
      </div>

      <div class="contentGroup">
        <div class="content show" data-content="1">Americano</div>
        <div class="content" data-content="2">BLT sandwich</div>
        <div class="content" data-content="3">black tea</div>
        <div class="content" data-content="4">cheese bagel</div>
      </div>
    </main>
    <script type="text/javascript" src="./tab2.js"></script>
  </body>
</html>
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');

tabs.forEach((tab) => {
  tab.addEventListener('click', () => {
    // getAttribute
    const tabNumber = tab.getAttribute('data-tab'); // 1,2,3,4

    // 1. 특정 탭 클릭 이후 모든 탭의 class(selected,show) 제거
    tabs.forEach((t) => t.classList.remove('selected'));
    contents.forEach((c) => c.classList.remove('show'));

    // 2. 선택한 특정 탭만 class명 추가(selected, show) => 즉 attribute 다시 지웠다 추가하는 것
    tab.classList.add('selected');
    // 예) attribute명이 data-content =1 인 요소의 클래스에 'show'추가
    document
      .querySelector(`[data-content="${tabNumber}"]`)
      .classList.add('show');
  });
});

 

[배운점]

1. 클릭 이후 모든 탭에 대해서 display 되는 class 요소(selected, show)를 제거하고, 화면에 보여주기를 원하는 탭에 대해서만 다시 클래스를 추가한다. 

 

2. attribute는 custom(data-tab) 으로 설정할 수 있다.

<div class="tab" data-tab="3">juice</div>

 

3.  attribute 의 값(value)과 대응되는 요소를 매칭 시킬 수 있다. 이때 attribute가 한 개 이상이기 때문에 배열([ ])형식으로 작성한다.

    const tabNumber = tab.getAttribute('data-tab'); // 1,2,3,4
    document
      .querySelector(`[data-content="${tabNumber}"]`)
      .classList.add('show');

 

728x90
반응형

'JavaScript' 카테고리의 다른 글

[트러블슈팅] (TypeError: Cannot read properties of null (reading '...')) 에러 해결하기  (0) 2023.08.15
[자바스크립트] 스코프 체인 알아보기  (0) 2023.08.09
[자바스크립트] 콜 스택 분석하기  (0) 2023.08.09
자바스크립트 활용-구구단  (0) 2023.06.28
자바스크립트 활용  (0) 2023.06.28

'JavaScript'의 다른글

  • 현재글[자바스크립트] 탭 스위쳐(tab switcher) 만들기, 탭 전환 기능 구현하는 법

관련글

티스토리툴바