[javaScript] data set 활용해 jquery 없이 탭메뉴 만들기

<div class="tab_wrap">
	<!-- tab menu -->
	<ul class="tabs">
    	<li class="tab_item active"><a href="#n" class="tab_link" data-tab="tabCnt01"></a></li> 
        <li class="tab_item"><a href="#n" class="tab_link" data-tab="tabCnt02"></a></li>
    </ul>
    
    <!-- tab contents -->
    <div class="tab_cnt active" data-order="tabCnt01">
    </div>
    <div class="tab_cnt" data-order="tabCnt02">
    </div>
</div>

.tab_cnt{display: none;}
.tab_cnt.active{display: block;}

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');
            }
          })
        })
      })

 

참고

https://7357.tistory.com/34