珠峰培训

利用CSS实现无js的tab切换

作者:

2017-04-27 19:53:27

580

 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>