body {
margin:0;
}
ul,li {
margin:0;
padding:0;
list-style:none;
}
.tab-wrap {
width:750px;
margin:50px auto;
text-align:center;
}
.tab-list {
width:100%;
}
.tab-list::after {
content:'';
display:block;
clear:both;
}
.tab-item {
float:left;
width:150px;
height:45px;
text-align:center;
line-height:45px;
box-sizing:border-box;
font-size:16px;
border-top:1px solid #333;
border-bottom:1px solid #333;
border-left:1px solid #333;
cursor:pointer;
}
.tab-item.cur {
color:#fff;
background-color:#333;
}
.tab-item:last-child {
border-right:1px solid #333;
}
.tab-content {
position:relative;
}
.tab-content .info {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:500px;
border:1px solid #333;
border-top:0;
font-size:30px;
text-align:center;
line-height:500px;
box-sizing:border-box;
}
.tab-content .info.active {
display:block;
}
更新时间:2020-10-20 00:54:24
保持结构相同,结构中的类名,可以随意更改,以参数传入即可