巧用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>