小程序开发公司：www.zkelm.com
纯CSS实现 tab分栏，我大概看了一下，大概有2种方法， 一种就是利用 radio的单选，利用的就是伪类 input:checked (选择时候的状态)
请参考 hover属性， 当 鼠标移开的时候 状态不存在， 则属性消失， 所以 input：checked 不被选择的时候 属性就不存在了。
则 把相邻的div ：恢复原样 node。
我们现在先介绍第一种：使用input radio 实现 tab分栏效果
1.先建立一个box div 来框住几个ul li
<style>
*{
margin: 0;
padding:0;
}
.box{
margin: 10px;
}
ul li{
list-style-type:none;
width:150px;
background-color: #666;
height: 30px;
line-height: 30px;
margin-left: 1px;
}
ul{
display: flex;
position: relative;
padding: 0;
}
</style>
<div class="box">
<ul>
<li><input type="radio" name="mc" id="radio1"/><label for="radio1">小程序开发</label></li>
<li><input type="radio" name="mc" id="radio2"/><label for="radio2">公众号开发</label></li>
<li><input type="radio" name="mc" id="radio3"/><label for="radio3">软件开发</label></li>
<ul/>
</div>
显示的效果如下：
接下来我们加入指令，让点击的时候 就切换 label的背景色和 字体颜色改成白色，顺便把 input 隐藏
input{display: none;}
input:checked+label{
background-color: aqua;
width: 100%;
height: 100%;
display: block;
color: #888;
}
显示效果如下：
加入div 在每一个li之中加入div，然后 设置position：absolute 浮动起来， left：0 的位置。这样子就可以实现了
<div class="box">
<ul>
<li><input type="radio" name="mc" id="radio1"/><label for="radio1">小程序开发</label>
<div class="content">内容一：广西小程序开发公司：www.zkelm.com</div></li>
<li><input type="radio" name="mc" id="radio2"/><label for="radio2">公众号开发</label>
<div class="content">内容二：广西公众号开发公司：www.zkelm.com</div></li>
<li><input type="radio" name="mc" id="radio3"/><label for="radio3">软件开发</label>
<div class="content">内容三：广西软件开发公司：www.zkelm.com</div></li>
</ul>
</div>
css 参数：
input{display: none;}
input+label+div{
position: absolute;
background-color: #ddd;
height: 100px;
width:500px;
border: 1px solid #666;
left:0;
text-align: left;
}
如图
1.先让.content全部隐藏
2.input：checked+labe+div{display：block} 这样子就可以实现了
完整的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用纯Css实现tab分栏切换效果</title>
<style>
*{
margin: 0;
padding:0;
}
.box{
margin: 10px;
position: relative;
}
ul li{
list-style-type:none;
width:150px;
background-color: #666;
height: 30px;
line-height: 30px;
margin-left: 1px;
text-align: center;
}
ul{
display: flex;
padding: 0;
}
input{display: none;}
input:checked+label{
background-color: aqua;
width: 100%;
height: 100%;
display: block;
color: #888;
}
input+label+div{
position: absolute;
background-color: #ddd;
height: 100px;
width:500px;
border: 1px solid #666;
left:0;
text-align: left;
}
input:checked+label+div{
display: block;
}
.content{
display: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><input type="radio" name="mc" id="radio1"/><label for="radio1">小程序开发</label>
<div class="content">内容一：广西小程序开发公司：www.zkelm.com</div></li>
<li><input type="radio" name="mc" id="radio2"/><label for="radio2">公众号开发</label>
<div class="content">内容二：广西公众号开发公司：www.zkelm.com</div></li>
<li><input type="radio" name="mc" id="radio3"/><label for="radio3">软件开发</label>
<div class="content">内容三：广西软件开发公司：www.zkelm.com</div></li>
<ul/>
</div>
</body>
</html>
显示结果:
南宁软件开发公司：www.zkelm.com