tab选项卡实现的4种方式

1.首先你需要一段css代码

<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .btn {
        display: flex;

    }

    .cont {
        width: 500px;
        margin: 100px auto;
    }

    .btn {
        width: 100%;
    }

    .btn li {
        flex: 1;
        border: 1px solid green;
        text-align: center;
        height: 30px;
    }

    .back {
        width: 100%;
        position: relative;
    }

    .back li {
        height: 300px;
        width: 100%;
        border: 1px solid pink;
        text-align: center;
        color: blue;
        line-height: 300px;
        font-weight: 700;
        font-size: 50px;
        position: absolute;
    }

    .back :nth-child(2) {
        display: none;
    }

    .back :nth-child(3) {
        display: none;
    }
</style>

2. 基本的html布局

    <div class="cont">
        <ul class="btn">