效果：
代码：
html：
列表一内容列表二内容列表一列表二
css：
.main{
position: absolute;
left: 50%;
top:30%;
transform: translate(-50%,-50%);
}
.tab {
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none;
}
.tab li {
float: left;
}
.tab li a {
text-decoration: none;
color: #000;
background: #ddd;
display: inline-block;
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
}
#content1,
#content2 {
display: none;
width:240px;
height:100px;
border:1px solid #ddd;
position: absolute;
top:40px;
padding:10px;
box-sizing: border-box;
}
#content1:target,
#content2:target {
display: block;
}
#content1:target ~ .tab li:nth-child(1) a{
background:skyblue;
color:#fff;
}
#content2:target ~ .tab li:nth-child(2) a{
background:skyblue;
color:#fff;
}
css关键部分：
#content1,
#content2 {
display: none;
}
#content1:target,
#content2:target {
display: block;
}
#content1:target ~ .tab li:nth-child(1) a{
background:skyblue;
color:#fff;
}
#content2:target ~ .tab li:nth-child(2) a{
background:skyblue;
color:#fff;
}
