选项卡

<!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 {
        width: 100%;
        height: 100%;
    }

    html {
        font-size: 10px;
    }

    .tab {
        width: 40rem;
        height: 30rem;
        border: solid 2px rgb(72, 255, 0);
        border-radius: 8px;
        overflow: hidden;
    }

    .tab-title {
        width: 100%;
        height: 5rem;
        display: flex;
        justify-content: space-around;
        border-bottom: solid 1px rgb(72, 255, 0);
    }

    .tt {
        border-right: solid 1px rgb(72, 255, 0);
        width: 33%;
        height: 5rem;
        line-height: 5rem;
        text-align: center;
        font-size: 1.8rem;
        cursor: pointer;
    }

    .tab-title .tt:last-child {
        border-right: none;
    }

    .tt:hover {
        background-color:antiquewhite;
        color: white;
    }
    .tt.active{
        background-color: rgb(72, 255, 0);
    }

    .tab-content {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        background-color: beige;
    }

    .tab-content .tc {
        width: 100%;
        height: 100%;
        font-size: 1.6rem;
        text-align: center;
        display: none;
        position: absolute;

    }

    .tc:nth-of-type(1) {
        background-color: #37ce2fee;
        display: block;
    }

    .tc:nth-of-type(2) {
        background-color: rgb(9, 122, 84);
    }

    .tc:nth-of-type(3) {
        background-color: rgb(4, 53, 5);
    }
</style>

</head>

<body>
<div class="tab">
<div class="tab-title">
<div class="tt active">标题1</div>
<div class="tt">标题2</div>
<div class="tt">标题3</div>
</div>
<div class="tab-content">
<div class="tc">内容1</div>
<div class="tc">内容2</div>
<div class="tc">内容3</div>
</div>
</div>
<script>
let tts = document.getElementsByClassName("tt")
for(let i = 0;i < tts.length; i++){
tts[i].onmouseenter=function(){
console.log("鼠标进入了第"+i+"个标题")
let tcs = document.getElementsByClassName("tc")
for(let j = 0;j < tcs.length; j++){
tcs[j].style.display="none"
}
tcs[0].style.display="block"

        for(let k = 0;k < tts.length; k++){
            tts[k].classList="tt"
            
        }
        tts[i].classList="tt active"
      }
    }
</script>

</body>

</html>

推荐阅读更多精彩内容