자바스크립트로 탭메뉴만들기

자바스크립트로 탬메뉴를 만들어보자

	<div class="tab_menu_wrap">
        <ul class="tab">
            <li class="tabMenu active">탭메뉴1</li>
            <li class="tabMenu">탭메뉴2</li>
        </ul>
        <div class="content_wrap">
            <div class="content active">탭 컨텐츠입니다1.</div>
            <div class="content">탭 컨텐츠입니다2.</div>
      </div>

     * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        }

        li {
        list-style: none;
        }

        .tab_menu_wrap {
        width: 800px;
        margin: 200px auto;
        }

        .tab {
        display: flex;
        gap: 30px;
        }

        .tabMenu {
        border: 1px solid green;
        padding: 10px 20px;
        border-radius: 20px;
        }

        .content_wrap {
        margin-top: 20px;
        background: green;
        border-radius: 20px;
        }

        .content {
        padding: 20px;
        color: #fff;
        font-size: 24px;
        display: none;
        }

        .tabMenu.active {
        background: green;
        color: #fff;
        }

        .content.active {
        display: block;
        }

const tabItem = document.querySelectorAll('.tabMenu');
    const tabInner = document.querySelectorAll('.content');   
    
    tabItem.forEach((tab, idx)=>{
        tab.addEventListener('click',function(){
            tabInner.forEach((inner)=>{
                inner.classList.remove('active');
            })
            tabItem.forEach((item)=>{
                item.classList.remove('active');
            })

            tabItem[idx].classList.add('active');
            tabInner[idx].classList.add('active');
        })
    })

forEach문을 활용하여
메뉴와 컨텐츠를 클릭시 반복문을돌리도록
만들어보았다.