选项卡

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        html,body{height: 100%;width: 100%;}
        .tab{width: 50rem;
        height: 40rem;
        border: solid 1px #000;
        background: #2ad3b7;
        }
        .tab-title{width: 100%;
        height: 6rem;
        width: 100%;
        border-bottom: solid 2px orange;
        display: flex;
        justify-content: space-between;
        align-items: center;
        }
        .tt{flex: 1;
        height: 6rem;
        width: 100%;
        background: #e47d7d;
        font-size: 1.9rem;
        line-height: 5rem;
        text-align: center;
        }
        .tt.active,
        .tt:hover{
            background: #1ca9d0;
            color: #000;
        }
        .tab-content{width: 100%;height: 36rem;
        background: #cd2424;
        position: relative;}
        .tc{width: 100%;
        height: 100%;
        font-size: 1.5rem;
        text-align: center;
        color: aliceblue;
        position: absolute;
        display: none;}
        .tc.active{display: block;}
        .tc:nth-of-type(1){background: #d8c926;}
        .tc:nth-of-type(2){background: #c81f95;}
        .tc:nth-of-type(3){background: #19d06e;}
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab-title">

            <div class="tab-title">
                <div class="tt">标题1</div>
                <div class="tt">标题2</div>
                <div class="tt">标题3</div>
            </div>

                </div>
                <div class="tab-content">
                    
                        <div class="tc active">内容1</div>
                        <div class="tc">内容2</div>
                        <div class="tc">内容3</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
            let tta = document.getElementsByClassName("tt")
            for (let i =0; i < tta.length; i++){
                tta[i].onmouseenter = function(){
                    for (let j =0; j<tta.length; j++){
                        tta[j].classList = "tt"
                    }
                    tta[i].classList = "tt active"
                    let tca = document.getElementsByClassName("tc")
                    for(let x =0; x<tca.length; x++){
                        tca[x].classList = "tc"
                    }
                    tca[i].classList = "tc active"
                }
            }

    </script>
    
</body>
</html>

屏幕截图 2025-03-31 154635.png

屏幕截图 2025-03-31 154631.png

屏幕截图 2025-03-31 154625.png