html 导航菜单切换效果,纯CSS实现Tab导航栏切换

效果：

代码：

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;

}