[javaScript] 자바스크립트로 탭 구현

HTML

<div class="tab_wrap">
    <!-- s: tab menu -->
    <ul class="tabs">
        <li class="tab_item active">
        	<a href="#n" class="tab_link" data-tab="tabCnt01" title="tab1">tab1</a>
        </li>
        <li class="tab_item">
        	<a href="#n" class="tab_link" data-tab="tabCnt02" title="tab2">tab2</a>
        </li>
    </ul>
    <!-- // e: tab menu -->

    <!-- s: tab contents -->
    <div class="tab_cnt tab_cnt_01 active" data-order="tabCnt01">
    	tab 1 content
    </div>
    <div class="tab_cnt tab_cnt_02" data-order="tabCnt02">
    	tab 2 content
    </div>
    <!-- // e: tab contents -->
</div>

 

CSS

.tab_cnt{display: none;}

 

javaScript

// tab event
  const tabMenu = document.querySelectorAll(".tabs li");
  const tabBtn = document.querySelectorAll(".tab_link");
  const tabCont = document.querySelectorAll(".tab_cnt");

  tabBtn.forEach(function (e) {
    e.addEventListener("click", () => {
      const dataTab = e.dataset.tab;
      tabMenu.forEach(function (i) {
        i.classList.remove("active");
      });
      e.parentNode.classList.add("active");

      tabCont.forEach(function (item) {
        let dataOrder = item.dataset.order;
        if (item.dataset.order === dataTab) {
          item.classList.add("active");
        } else {
          item.classList.remove("active");
        }
      });
    });
  });