[Javascript] 탭(Tab) 구현하기

다음과 같이 각 탭과 박스를 'id'를 통해 연결시켜준 후, 탭의 'selected' 클래스와 박스의 'hide' 클래스을 이용해 스타일을 나타내준다.

선택한 탭만 'selected' 클래스를 가지도록 하고, 선택한 탭과 관련된 박스를 제외하고는 'hide' 클래스를 가지도록 한다.

<style>
    .test-tab {
        background-color: lightskyblue;
        border: 0;
        cursor: pointer;
        padding: 5px 10px;
    }

    .test-tab.selected {
        background-color: darkblue;
        color: white;
        font-weight: bold;
    }

    .test-box-wrap {
        border: 2px solid darkblue;
        width: 200px;
        min-height: 100px;
        padding: 5px 10px;
    }

    .hide {
        display: none;
    }

</style>

    <div class="test-tab-wrap">
        <button onclick="clickTab(this, 'testbox1')" class="test-tab selected">tab1</button>
        <button onclick="clickTab(this, 'testbox2')" class="test-tab">tab2</button>
        <button onclick="clickTab(this, 'testbox3')" class="test-tab">tab3</button>
    </div>
    <div class="test-box-wrap">
        <div id="testbox1" class="test-box">test box 11111 ...</div>
        <div id="testbox2" class="test-box hide">test box 22222 ...</div>
        <div id="testbox3" class="test-box hide">test box 33333 ...</div>
    </div>

<script>
    function clickTab($targetTab, targetBoxId) {
        const $tabList = document.querySelectorAll(".test-tab");
        const $boxList = document.querySelectorAll(".test-box");
        const $targetBox = document.querySelector(`#${targetBoxId}`);

        for(let $tab of $tabList) $tab.classList.remove("selected");
        for(let $box of $boxList) $box.classList.add("hide");

        $targetTab.classList.add("selected");
        $targetBox.classList.remove("hide");    
    }
</script>

'tab2'를 클릭한 결과