使用纯css实现选项卡效果

html部分：

<ul>
    <li>
        <input type="radio" name="radio" id="tab1" checked>
        <label for="tab1">选项一</label>
        <div class="content">内容一</div>
    </li>
    <li>
        <input type="radio" name="radio" id="tab2">
        <label for="tab2">选项二</label>
        <div class="content">内容二</div>
    </li>
    <li>
        <input type="radio" name="radio" id="tab3">
        <label for="tab3">选项三</label>
        <div class="content">内容三</div>
    </li>
    <li>
        <input type="radio" name="radio" id="tab4">
        <label for="tab4">选项四</label>
        <div class="content">内容四</div>
    </li>
    <li>
        <input type="radio" name="radio" id="tab5">
        <label for="tab5">选项五</label>
        <div class="content">内容五</div>
    </li>
</ul>

css部分：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        position: relative;
        width: 500px;
        margin: 100px auto;
    }
    ul li{
        list-style: none;
    }
    ul li input{
        display: none;
    }
    ul li input:checked + label{
        color: #fff;
        background-color: red;
    }
    ul li label{
        width: 100px;
        line-height: 50px;
        box-sizing: border-box;
        border: 1px solid #000;
        border-right: 0;
        float: left;
        text-align: center;
    }
    ul li:last-child label{
        border-right: 1px solid #000;
    }
    ul li .content{
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        line-height: 500px;
        text-align: center;
        border: 1px solid #000;
        border-top: 0;
        box-sizing: border-box;
    }
    ul li input:checked ~ .content{
        display: block;
    }
</style>