Vanila JS Tab menu ex

    <style>
      .tabcon div{width: 600px; height: 300px; background: orange; display: none;}
      .current{background: red; color: #fff;}
    </style>

 

<ul class="tab">
    <li><a class="btn" href="#con1">1</a></li>
    <li><a class="btn" href="#con2">2</a></li>
    <li><a class="btn" href="#con3">3</a></li>
</ul>

<div class="tabcon">
    <div id="con1">내용1</div>
    <div id="con2">내용2</div>
    <div id="con3">내용3

 

 var activeCont = '';
 var tabList = document.querySelectorAll('.tab li a');

 var contents = document.querySelectorAll('.tabcon div');
 tabList[0].classList.add('current');
 contents[0].style.display = 'block';  
 
 for(var i = 0; i < tabList.length; i++){
    tabList[i].addEventListener('click', function(e){
       e.preventDefault();
       
        for(var j = 0; j < tabList.length; j++){
             // 나머지 버튼 클래스 제거
            tabList[j].classList.remove('current');
            // 나머지 컨텐츠 display:none 처리
            contents[j].style.display = 'none';
        }

      // 버튼 관련 이벤트
      this.classList.add('current');  
      activeCont = this.getAttribute('href');
      document.querySelector(activeCont).style.display = 'block';
    });
 }