巧用css实现无js的tab切换

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

---

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

tab1

再之后利用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代码

    

        
        第一张
        

            

                
第一页tab
            
        
    
    

        
        第二张
        

            

                
第二页tab