JS | 토글탭 실습

메뉴 선택시 토글메뉴 출력

style ↓↓↓

 <style>
        @font-face {
                    font-family: 'GmarketSansMedium';
                    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                    }
        * {font-family: 'GmarketSansMedium';
           font-weight: 400;}

        .toggle li {    
            display: inline-block;
            padding: 15px 20px 14px;
            width: 25%; 
            text-align: center;
            border: 1px solid rgb(235, 235, 235);
            border-radius: 10px;
            box-shadow: 0.5px 3px 3px rgb(223, 223, 223);
            cursor: pointer;
        }

        .toggle-menu {display: none;}
        .active {
            display: block;
            animation: fadeIn 1s ease-in-out;
            background-color: thistle;
        }

        /*애니메이션*/
        @keyframes fadeIn {
            from {
                opacity: 0;
                background-color: tomato;
                margin-left: -100px;
            } to {
                opacity: 1;
                background-color: thistle;
                margin-left: 0px;
            }
        }
    </style>

html

↓↓↓

  <!--
     1. ul에 이벤트 버블링을 이용해서 클릭이벤트를 걸고 클릭되는 타겟의 data-id를 얻습니다.
     2. toggle-menu의 active속성을 삭제
     3. data-id의 값에 알맞는 태그에 active속성을 추가하면됩니다.
    -->

    <section>
        <ul class="toggle">
            <li data-id="#toggle1">MENU 1</li>
            <li data-id="#toggle2">MENU 2</li>
            <li data-id="#toggle3">MENU 3</li>
        </ul>
    
        <div>
            <div class="toggle-menu active" id="toggle1">
                토글메뉴1
            </div>
            <div class="toggle-menu" id="toggle2">
                토글메뉴2
            </div>
            <div class="toggle-menu" id="toggle3">
                토글메뉴3
            </div>
        </div>
    
        </section>

var toggle = document.querySelector('.toggle');
            
toggle.onclick = function(e){
                
   e.preventDefault(); //고유이벤트 중단
                
   if(e.target.tagName != "LI") return;
                
   var str = e.target.dataset.id; //클릭한 id 받아오기
                
   var togglemenu = document.querySelectorAll('.toggle-menu'); //토글메뉴 받아오기

   for(var i=0; i < togglemenu.length; i++){
      if(e.target.dataset.id.includes(togglemenu[i].id)){ //클릭한 id와 토글 메뉴id가 일치한다면
      		togglemenu[i].classList.toggle("active"); //토글 메뉴를 보여준다.
      } else {
             togglemenu[i].classList.remove("active"); //일치하지 않으면 active를 삭제한다.
      }
   }
}

https://michalsnik.github.io/aos/ 

애니메이션

맨 아래에 코드 있음

AOS - Animate on scroll library