[자바스크립트 예제 #02] Tabs 탭메뉴 만들기

tab-01

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque esse beatae voluptates eius placeat nostrum accusantium recusandae impedit quae, exercitationem, ea sunt necessitatibus, illum et. Aspernatur aliquam omnis nemo necessitatibus.

tab-02

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque esse beatae voluptates eius placeat nostrum accusantium recusandae impedit quae, exercitationem, ea sunt necessitatibus, illum et. Aspernatur aliquam omnis nemo necessitatibus.

tab-03

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque esse beatae voluptates eius placeat nostrum accusantium recusandae impedit quae, exercitationem, ea sunt necessitatibus, illum et. Aspernatur aliquam omnis nemo necessitatibus.

 

바닐라 자바스크립트 예제 - tabs 탭메뉴

 

 

기능 소개 및 자바스크립트 개념

간단한 탭 메뉴, 탭1 누르면 탭1의 내용 나오고 탭2 나오면 탭2의 내용이 나옴

- DOM : querySelector, querySelectorAll, getElementById
- addEventListener
- classList.add(), remove()
- forEach()
- e.target.dataset.id

 

HTML, CSS

자바스크립트 전에, html에서 간단히 해야 할 부분은 다음과 같다.

button.tab-btn에는 data-id=""라는 사용자 정의 속성과 원하는 값을 넣어준다. 이 값을 각각의 탭(.tab)의 id 속성에도 넣어서 일치하게 한다.

<section class="tabs-wrap">
    <div class="btns">
        <button class="tab-btn active" data-id="tab-01">tab-01</button>
        <button class="tab-btn" data-id="tab-02">tab-02</button>
        <button class="tab-btn" data-id="tab-03">tab-03</button>
    </div>
    <div class="tabs">
        <div class="tab active" id="tab-01">
            <h4>tab-01</h4>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque esse beatae voluptates eius placeat nostrum
                accusantium recusandae impedit quae, exercitationem, ea sunt necessitatibus, illum et. Aspernatur aliquam
                omnis nemo necessitatibus.
            </p>
        </div>
        <div class="tab" id="tab-02">
            <h4>tab-02</h4>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque esse beatae voluptates eius placeat nostrum
                accusantium recusandae impedit quae, exercitationem, ea sunt necessitatibus, illum et. Aspernatur aliquam
                omnis nemo necessitatibus.
            </p>
        </div>
        <div class="tab" id="tab-03">
            <h4>tab-03</h4>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque esse beatae voluptates eius placeat nostrum
                accusantium recusandae impedit quae, exercitationem, ea sunt necessitatibus, illum et. Aspernatur aliquam
                omnis nemo necessitatibus.
            </p>
        </div>
    </div>
</section>

 

app.js

1. 탭을 감싸는 부모 요소(.tabs-wrap), 버튼(.tab-btn), 각각의 탭(.tab)을 상수로 지정한다.

const tabswrap = document.querySelector(".tabs-wrap");
const btns = document.querySelectorAll(".tab-btn");
const tabs = document.querySelectorAll(".tab");

 

2. tabswrap이 이벤트 타겟이 되고 클릭했을 때 콜백함수로 다음 코드가 실행된다.

- (콜백함수) tabswrap 안에서 클릭한 요소(문서 객체) 중에 [dataset-id=""] 속성을 가져오는데, 이는 상수로 지정한다.

- e.target.dataset.id 값이 무엇인지 헷갈릴 때는 주석처리된 console.log(id)로 콘솔에 출력하여 확인한다.

tabswrap.addEventListener("click", (e) => {
  
  const id = e.target.dataset.id;
  // console.log(id);
  
});

 

3. 상수 id 값일 때, 여러개의 .tab-btn 의 클래스에서 active를 전부 제거한다.

- 클릭한 요소(.tab-btn)는 다시 active를 추가한다. 이렇게 코드를 짜야 다른 탭들은 숨겨지는 화면을 볼 수 있다.

tabswrap.addEventListener("click", (e) => {
  const id = e.target.dataset.id;
  // console.log(id);

  if (id) {
  
    btns.forEach((btn) => {
      btn.classList.remove("active");
    });
    e.target.classList.add("active");
    
  }
  
});

 

4. 각각의 탭(tab)도 active를 제거한다.

tabswrap.addEventListener("click", (e) => {
  const id = e.target.dataset.id;
  // console.log(id);

  if (id) {
    btns.forEach((btn) => {
      btn.classList.remove("active");
    });
    e.target.classList.add("active");

    tabs.forEach((tab) => {
      tab.classList.remove("active");
    });
  }
});

 

5. getElementById() 메소드로 처음에 정의해준 상수(id)를 참조하여 tab의 id 값을 가져온다. 그 뒤에 active를 추가한다.

- HTML에서 .tab의 id값과 button.tab-btn의 data-id="" 값과 동일하다. 그래서 getElementById(id) 메소드를 사용하면 tab의 id 값을 가져올 수 있다.

const tabswrap = document.querySelector(".tabs-wrap");
const btns = document.querySelectorAll(".tab-btn");
const tabs = document.querySelectorAll(".tab");

tabswrap.addEventListener("click", (e) => {
  const id = e.target.dataset.id;
  // console.log(id);

  if (id) {
    btns.forEach((btn) => {
      btn.classList.remove("active");
    });
    e.target.classList.add("active");

    tabs.forEach((tab) => {
      tab.classList.remove("active");
    });

    const element = document.getElementById(id);
    element.classList.add("active");
  }
});

 

HTML, CSS, JS 모든 코드 다보기

https://github.com/SSOHERB/BasicJavaScript/tree/master/BasicJavaScript/Tabs

 

예제 출처

https://github.com/john-smilga/javascript-basic-projects