纯css实现tab切换的另一种方法(锚点定位法):纯css实现tab切换(锚点定位)
效果
核心
利用radio类型的input作为选中的鉴别标签,通过css的“:checked
”选择器实现选中项的显示。利用label标签作为选项种类的容器,利用其for属性与input标签绑定。
注意
1、默认第一项选中,所以第一个input元素因该有checked
属性。
2、input仅作选择的判断,不用显示,所以应全部display:none;
隐藏。
html代码
<ul class="tab">
<li class="tab-item">
<!-- 默认第一项选中,有checked -->
<input type="radio" name="check" id="active1" class="tab-input" checked>
<!-- for属性绑定input -->
<label for="active1" class="tab-tit">第一项</label>
<div class="tab-content">
内容1
</div>
</li>
<li class="tab-item">
<input type="radio" name="check" id="active2" class="tab-input">
<label for="active2" class="tab-tit">第二项</label>
<div class="tab-content">内容2</div>
</li>
<li class="tab-item">
<input type="radio" name="check" id="active3" class="tab-input">
<label for="active3" class="tab-tit">第三项</label>
<div class="tab-content">内容3</div>
</li>
<li class="tab-item">
<input type="radio" name="check" id="active4" class="tab-input">
<label for="active4" class="tab-tit">第四项</label>
<div class="tab-content">内容4</div>
</li>
</ul>
style代码
/*
* 整体宽、高均为可视化窗口的一半
* 去除默认的padding,margin居中
* flex布局为了使li水平平分区域
* relative是为了内容相对于它进行定位,因为内容的宽度要铺满,所以不能相对于li定位。
*/
.tab {
width: 50vw;
height: 50vh;
padding: 0;
margin: 0 auto;
list-style: none;
display: flex;
position: relative;
border: 1px solid #f0f;
border-radius: 5px;
overflow: hidden;
}
/* 隐藏input,主要利用“:checked”选择器,达到切换目的 */
.tab-input {
display: none;
}
/* 给选项卡统一背景色 */
.tab-item {
flex: 1;
height: 60px;
text-align: center;
background: cornflowerblue;
}
/* 选项卡label撑高 */
.tab-tit {
display: block;
width: 100%;
height: 100%;
line-height: 60px;
cursor: pointer;
}
/*
* hover高亮,选中高亮。
* “+”代表下一个,div+p:选择所有紧接着<div>元素之后的<p>元素。
* “:checked”代表选择每个选中的输入元素
*/
.tab-tit:hover,
.tab-input:checked+.tab-tit {
background: #f0f;
color: #fff;
}
/* 内容区域默认全隐藏,相对于ul定位*/
.tab-content {
display: none;
position: absolute;
top: 60px;
left: 0;
text-align: left;
text-indent: 2em;
padding: 10px;
box-sizing: border-box;
}
/*
* 选中项内容区域显示
* ~:表示某元素之后的每一个某元素。p~ul:选择p元素之后的每一个ul元素
*/
.tab-input:checked~.tab-content {
display: block;
}
如果对你有帮助,可以点赞、收藏+关注😘下面是另一种方法。
纯css实现tab切换的另一种方法(锚点定位法):纯css实现tab切换(锚点定位)