<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #tabs{
        width:300px;
        height:500px;
        position:relative;
        border:1px solid black;
    }
    .tab{
        position:absolute;
        width:100%;
        height:100%;
        background: beige;
        color:blueviolet;
        font-size: 2em;;
    }
</style>
</head>
<body>
    <button onclick="ftab(0)">tab1</button>
    <button onclick="ftab(1)">tab2</button>
    <button onclick="ftab(2)">tab3</button>
    <div id="tabs">
        <div class="tab" style="z-index:999;"><h1>첫째탭</h1></div>
        <div class="tab"><h1>둘째탭</h1></div>
        <div class="tab"><h1>세째탭</h1></div>
    </div>
<script>
    const myTabs = document.querySelectorAll(".tab");
    const mybtns = document.querySelectorAll("button");

    //모든 탭 인덱스 초기화
    function finitTab(){
        for(let i = 0; i < myTabs.length; i++){
            myTabs[i].style.zIndex = 1;
            mybtns[i].style.borderBottom = "1px solid black";
        }
    }
    function ftab(pNum){
        finitTab();     //모두 초기화
        myTabs[pNum].style.zIndex = 999; // 원하는 것만 앞으로
        // event.target.style.borderBottom = "10px solid black"; // 괘니
        mybtns[pNum].style.borderBottom = "10px solid black";
    }
</script>
</body>
</html>

/코드