console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>目标为类</title>
</head>
<body>
<h3>目标伪类实现简单点击切换</h3>
<div class="container">
<ul>
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
</ul>
</div>
<div class="list"><a href="#one">1</a><a href="#two">2</a><a href="#three">3</a></div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.container ul li {
list-style: none;
width: 300px;
height: 300px;
float: left;
font-size: 100px;
text-align: center;
line-height: 300px;
}
.container ul {
width: 900px;
height: 300px;
}
li:nth-child(1) {
background-color:antiquewhite;
}
li:nth-child(2){
background-color:aqua;
}
li:nth-child(3){
background-color: chocolate;
}
.container {
width: 300px;
height: 300px;
overflow: hidden;
}
.list {
width: 300px;
text-align: center;
}
.list a {
border: solid 1px #000;
text-decoration: none;
display: inline-block;
width: 20px;
border-radius: 50%;
height: 20px;
margin: 5px;
}