Html 和 CSS 实现 Tab 切换效果

Html 和 CSS 实现Tab 切换效果

效果如下：

通过模拟单选框Radio来实现，通过 label 标签的 for 属性与单选框进行绑定，隐藏 input 标签来实现Tab 的切换

HTML代码：

<div class="container">
    <ul>
        <li>
            <input type="radio" name="changeTab" id="t1" checked="checked">
            <label for="t1">Tab1label>
            <div>1111div>
        li>
        <li>
            <input type="radio" name="changeTab" id="t2">
            <label for="t2">Tab2label>
            <div>2222div>
        li>
        <li>
            <input type="radio" name="changeTab" id="t3">
            <label for="t3">Tab3label>
            <div>3333div>
        li>
        <li>
            <input type="radio" name="changeTab" id="t4">
            <label for="t4">Tab4label>
            <div>4444div>
        li>
    ul>
div>

• 由于是单选框，所以 name 属性要相同
• label 标签的 for 属性和 input 标签的 id 保持一致
• input label div 三者的顺序不能打乱

CSS 样式代码：

	.container{
        width: 400px;
        margin: 100px auto;
    }
    ul {
        margin: 0;
        padding: 0;
        position: relative;
        display: flex;
        border-bottom: 1px solid #CAC9C9;
    }
    ul li {
        list-style: none;
        width: 100px;
        height: 46px;
    }
    ul li input {
        display: none;
    }
    input + label {
        display: block;
        cursor: pointer;
        width: 100px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        font-size: 16px;
    }
    input + label + div {
        width: 100%;
        display: none;
        position: absolute;
        left: 0;
        top: 48px;
    }
    input:checked + label {
        font-weight: bold;
        color: #1354a6;
        position: relative;
    }
    input:checked + label:after {
        content: "";
        width: 80px;
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 10px;
        background: #1354a6;
    }
    input:checked + label + div {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }