javascript 탭 메뉴

html

<div class="tab_menu">
        <ul class="tab">
            <li class="tab_item active">탭메뉴1</li>
            <li class="tab_item">탭메뉴2</li>
            <li class="tab_item">탭메뉴3</li>
        </ul>
        <div class="tab_inner_wrap">
            <div class="tab_inner active">탭 컨텐츠입니다1.</div>
            <div class="tab_inner">탭 컨텐츠입니다2.</div>
            <div class="tab_inner">탭 컨텐츠입니다3.</div>
      </div>
</div>

js

const tabItem = document.querySelectorAll('.tab_item')
const tabInner = document.querySelectorAll('.tab_inner')

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

css

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

li {
    list-style: none;
}

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

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

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

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

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

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

.tab_inner.active {
    display: block;
}