很多人对于js比较无奈，在网上下载的效果，调试过程中总会遇到一些问题，所以很多人渴望有css能实现简单的tab选项卡的效果，下面分享给大家的就是纯css，比较实用，希望能帮到大家。
<DOCTYPE html>
<html>
<head>
<title>Tab选项卡</title>
<meta charset="utf-8">
<style type="text/css">
body{
font-size: 0;
}
.box{
text-align: center;
}
.box .tab{
display: inline-block;
width: 120px;
height: 44px;
padding: 7px;
border: 1px solid #ccc;
border-bottom: 0px;
box-sizing:border-box;
background: #fff;
font-size: 16px;
line-height: 26px;
color: #555;
transition: all 0.5s linear;
}
.box .tab:hover{
background: #eee;
transition: all 0.5s linear;
}
.con{
width: 800px;
height: 400px;
margin:0 auto;
}
.con .list{
width: 800px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
position: absolute;/*堆一起*/
z-index: 1;
box-sizing:border-box;
}
.list img{
height: 300px;
width: auto;
margin: 40px auto;
}
.box>.tab:nth-child(1):hover~.con>.list:nth-child(1),
.box>.tab:nth-child(2):hover~.con>.list:nth-child(2),
.box>.tab:nth-child(3):hover~.con>.list:nth-child(3),
.box>.tab:nth-child(4):hover~.con>.list:nth-child(4),
.list:hover{
z-index: 3;
}
</style>
</head>
<body>
<div class="box">
<a class="tab">哇咔咔</a>
<a class="tab">太棒了</a>
<a class="tab">纳尼</a>
<a class="tab">不要听</a>
<div class="con">
<div class="list"><img src="img/a.jpg"></div>
<div class="list"><img src="img/c.jpg"></div>
<div class="list"><img src="img/f.jpg"></div>
<div class="list"><img src="img/h.jpg"></div>
</div>
</div>
</body>
</html>
* {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body {
width:100%;
margin:0;
padding:0;
text-align:left;
font-size:12px;
font-family:方正黑体简体;
}
.tabs {
width:100%;
float:none;
list-style:none;
position:relative;
text-align:left;
}
.tabs li {
float:left;
display:block;
}
.tabs input[type="radio"] {
position:absolute;
top:-9999px;
left:-9999px;
}
.tabs label {
display:block;
padding:14px 21px;
border-radius:2px 2px 0 0;
font-size:14px;
font-family:方正黑体简体;
font-weight:normal;
text-transform:uppercase;
cursor:pointer;
position:relative;
top:4px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
.tabs label:hover {
/**选项卡点击后的背景**/
/*background:#703688;
*/
color:#479fb3;
text-decoration:underline;
font-size:14px;
font-family:方正黑体简体;
}
.tabs .tab-content1 {
z-index:2;
display:none;
overflow:hidden;
width:100%;
font-size:14px;
line-height:25px;
position:absolute;
}
.tabs .tab-content2 {
z-index:2;
display:none;
overflow:hidden;
width:100%;
font-size:14px;
line-height:25px;
position:absolute;
top:47px;
left:0;
}
.tabs [id^="tab"]:checked + label {
top:0;
padding-top:17px;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
display:block;
}
.h1 {
clear:both;
height:1px;
background-color:#e9e9e9;
}
.first_name {
float:left;
margin:20px 30px;
}
.right_name {
float:right;
margin:20px 50px;
}
作者：小屋
链接：http://www.rumenwu.com/operate/799.html
来源：入门屋
入门屋著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台，如有侵权请联系删除。
支付宝打赏 
微信打赏 
