小程序開發公司：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