<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
position: relative;
400px;
margin: 50px auto;
}
input {
display: none;
}
.nav {
padding:0;
position: relative;
overflow: hidden;
}
li {
list-style: none;
200px;
float: left;
text-align: center;
background: #ddd;
}
li label {
display: block;
200px;
line-height: 36px;
font-size: 18px;
cursor: pointer;
}
.content {
position: relative;
overflow: hidden;
400px;
height: 100px;
border: 1px solid #999;
box-sizing: border-box;
padding: 10px;
}
.content1,
.content2 {
display: none;
100%;
height: 100%;
}
.nav1:checked~.nav li {
background: #ddd;
color: #000;
}
.nav1:checked~.nav li:first-child {
background: #ff7300;
color: #fff;
}
.nav2:checked~.nav li {
background: #ddd;
color: #000;
}
.nav2:checked~.nav li:last-child {
background: #ff7300;
color: #fff;
}
.nav1:checked~.content>div {
display: none;
}
.nav1:checked~.content>div:first-child {
display: block;
}
.nav2:checked~.content>div {
display: none;
}
.nav2:checked~.content>div:last-child {
display: block;
}
.active {
background: #ff7300;
color: #fff;
}
.default {
display: block;
}
</style>
</head>
<body>
<div class="container">
<input class="nav1" id="li1" type="radio" name="nav">
<input class="nav2" id="li2" type="radio" name="nav">
<ul class='nav'>
<li class='active'>
<label for="li1">列表1</label>
</li>
<li>
<label for="li2">列表2</label>
</li>
</ul>
<div class="content">
<div class="content1 default">列表1内容:123456</div>
<div class="content2">列表2内容:abcdefgkijkl</div>
</div>
</div>
</body>
</html>