前言：
今天刚听说的用input和label来实现tab栏，也可以实现轮播图的形式，就可以在只学习了css就可以实现点击的效果，在以前我都是用:hover来实现鼠标移入内容出现，但是鼠标立马移开内容就会消失，现在就可以用input和label来实现点击一下，内容出现的效果，而且在不触发下次点击时内容都不会消失，比:hover用起来舒服很多哦，但是还是要根据实际情况去运用哦。内容虽少，但是真的很有意思哦，小编今天刚学会这种方式，就迫不及待地跟大家分享一下，大家支持一下哦，大佬还请指点指点。
请大家看详细代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
/* 把input的样式（空心小圆点）去掉 */
display: none;
}
/* 将label转成行内块元素，设置宽高和样式 */
.text-tab {
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: pink;
border: 1px solid black;
/* 鼠标移入变成小手*/
cursor: pointer;
}
/* 将内容区隐藏 */
.context {
width: 420px;
height: 200px;
border: 1px solid black;
margin-top: 5px;
position: absolute;
visibility: hidden;
}
/* 鼠标点击checked时内容区出现 */
#text1:checked~#boxl,
#text2:checked~#box2,
#text3:checked~#box3,
#text4:checked~#box4 {
visibility: visible;
}
</style>
</head>
<body>
<input type="radio" id="text1" name="text">
<label for="text1" class="text-tab">标题一</label>
<input type="radio" id="text2" name="text">
<label for="text2" class="text-tab">标题二</label>
<input type="radio" id="text3" name="text">
<label for="text3" class="text-tab">标题三</label>
<input type="radio" id="text4" name="text">
<label for="text4" class="text-tab">标题四</label>
<div id="boxl" class="context">
1111111
</div>
<div id="box2" class="context">
2222222
</div>
<div id="box3" class="context">
33333333
</div>
<div id="box4" class="context">
44444444
</div>
</body>
</html>
运行效果如下所示：
还有什么方法可以实现以上效果呢？ 锚点功能也是可以的哦。
期待小编下一篇博客吧。
希望大家多多支持哦