纯CSS选项卡

褪色

HTML:

<div class="tpt-bar">
    <input type="radio" name="bar" id="tab-1" checked="">
    <label for="tab-1">网站设置</label>
    <div class="tpt-bar-con">
        网站设置
    </div>
    <input type="radio" name="bar" id="tab-2">
    <label for="tab-2">用户管理</label>
    <div class="tpt-bar-con">
        用户管理
    </div>
    <input type="radio" name="bar" id="tab-3">
    <label for="tab-3">订单管理</label>
    <div class="tpt-bar-con">
        订单管理
    </div>
</div>


CSS:
.tpt-bar {
        display:flex;
        border:1px solid #e2e2e2;
        border-radius:2px;
        background:#f2f2f2;
        box-shadow:0 2px 5px 0 rgba(0,0,0,.1);
        flex-wrap:wrap;
}
.tpt-bar label {
        display:block;
        padding:0 20px;
        height:38px;
        line-height:38px;
        cursor:pointer;
        order:1;
}
.tpt-bar .tpt-bar-con {
        z-index:0;
        display:none;
        margin-top:-1px;
        padding:10px;
        width:100%;
        min-height:120px;
        border-top:1px solid #e2e2e2;
        background:#fff;
        order:99;
}
.tpt-bar input[type=radio] {
        position:absolute;
        opacity:0;
}
.tpt-bar input[type=radio]:checked+label {
        z-index:1;
        margin-right:-1px;
        margin-left:-1px;
        border-right:1px solid #e2e2e2;
        border-left:1px solid #e2e2e2;
        background:#fff;
}
.tpt-bar input[type=radio]:checked+label+.tpt-bar-con {
        display:block;
}

无言者