tabs

인터넷을 사용하다보면 아래 영상과 같이 클릭하는 버튼에 따라 아래 컨텐츠의 내용이 달라지는 것을 많이 경험했을 것이다. 이러한 것이 어떻게 동작하고 어떻게 만드는 건지 궁금해서 직접 구현해서 글로 작성해 보았다.

<div class="container">
  <div class="button-group">
    <button class="is-active" type="button" data-id="mail">Mail</button>
    <button type="button" data-id="cafe">Cafe</button>
    <button type="button" data-id="blog">Blog</button>
  </div>

  <div class="contents">
    <p class="content is-active" id="mail">Lorem, ipsum.</p>
    <p class="content" id="cafe">Lorem ipsum dolor sit amet.</p>
    <p class="content" id="blog">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa
      tempora at exercitationem?
    </p>
  </div>
</div>

const $container = document.querySelector(".container");
const buttons = document.querySelectorAll("button");
const contents = document.querySelectorAll(".content");

// 이벤트 위임
$container.addEventListener("click", function (e) {
  const id = e.target.dataset.id;

  if (id) {
    // 클릭한 버튼에만 스타일 적용
    buttons.forEach((button) => {
      button.classList.remove("is-active");
      e.target.classList.add("is-active");
    });

    // 클릭한 컨텐츠에만 스타일 적용
    // 클릭한 버튼의 사용자 정의 id 속성 값과 일치하는 content에만 스타일 적용
    contents.forEach((content) => {
      content.classList.remove("is-active");
    });
    const clickedContent = document.getElementById(id);
    clickedContent.classList.add("is-active");
  }
});