巧用css实现无js的tab切换

tab切换一直是页面之中主要的结构，最近在写vue的spa项目，想到可不能够不用href和js作控制，实现纯css和html的tab切换。

---

tab页面交换的原理无非是利用标签的display属性在显示与否之间的切换。
而利用这点后，咱们的input之中的单选按钮就要派上用场了。
首先经过设置input和相应的label来做为tab的导航。

<input type="radio" id="tab1" name="parent-type">
<label for="tab1" class="labe">tab1</label>

再以后利用input的checked的选择器就能够关联上要切换的页面了。
固然咱们须要把对应的主体内容标签跟在label标签后，利用兄弟选择器控制它的display属性。
为了让几个页面处于同一位置，咱们固然也要统一他们的位置。
这里直接利用了绝对定位的方法。
完成的css代码以下

input[type='radio']{
        display: none;
    }
    .tab label{
        display: block;
        cursor: pointer;
        position: absolute;
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #eee;
    }
    .label-1{
        left: 0;
        top: 0;
    }
    .label-2{
        left: 60px;
        top: 0;
    }
    input[type='radio']:checked~div[class^='mod']{
        display: block;
    }
    input[type='radio']:checked~label{
        background: orange;
    }
    [class^='mod']{
        position: absolute;
        top: 40px;
        left: 20px;
        display: none;
    }

html代码

<div>
        <input type="radio" id="r-1" name="tab" checked>
        <label for="r-1" class="label-1">第一张</label>
        <div class="mod-1">
            <ul>
                <li>第一页tab</li>
            </ul>
        </div>
    </div>
    <div>
        <input type="radio" id="r-2" name="tab">
        <label for="r-2" class="label-2">第二张</label>
        <div class="mod-2">
            <ul>
                <li>第二页tab</li>
            </ul>
        </div>
    </div>