tab切换html和css

    <style>
    .p {
        font-size: 0;
    }
        .s {
            position: relative;
            width: 50px;
            line-height: 50px;
            text-align: center;
            border:1px solid #ddd;
            box-sizing: border-box;
            display: inline-block;
            font-size: 14px;
        }
        .s+.s {
            margin-left: -1px;
        }
    .s.active {
     border-color: red;
     color: red;
     z-index: 9;
    }
    </style>

<div class="p">
        <div class="s ">1</div>
        <div class="s active">2</div>
        <div class="s">3</div>
        <div class="s">4</div>
    </div>