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>