js实现简单选项卡

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
</head>
<style>
    .box{
        width:600px;
        height: 600px;
        border: 1px solid #000;
        position: relative;
        margin: 50px auto;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-content: center;
    }
    .box1{
        width: 100%;
        height: 50px;
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        align-content: center;
        justify-content: center;

    }
    .box1>div{
        width: 200px;
        height: 100%;
        border: 1px solid #000;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
    }
    .box2{
        width: 100%;
        height: 550px;
        position: relative;
    }
    .box2>div{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    }
    .bg{
        background: #cf3700;
    }
</style>
<body>
<div class="box">
    <div class="box1" id="box1">
        <div class="bg">选项一</div>
        <div>选项二</div>
        <div>选项三</div>
    </div>
    <div class="box2" id="box2">
        <div style="display: block">内容一</div>
        <div>内容二</div>
        <div>内容三</div>
    </div>
</div>
<script>
    var box1 = document.getElementById("box1");
    var boxAchir = box1.children;
    var box2 = document.getElementById("box2");
    var boxBchir = box2.children;
    for (let i=0;i<boxAchir.length;i++){
        boxAchir[i].onclick = function () {
            for (let i=0;i<boxAchir.length;i++){  //清空其他选项样式
                boxAchir[i].className = '';
                boxBchir[i].style.display = 'none';
            }
            this.className = 'bg';
            boxBchir[i].style.display = 'block';
        }
    }
</script>
</body>
</html>

效果图如下：
在这里插入图片描述

这样一个简单的选项卡就实现了，是不是超级简单！！！

来源：https://blog.csdn.net/Y_one/article/details/102728919

标签

选项卡

display