demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
position:fixed;
top: 100px;
left: 20px;
}
div {
width: 800px;
margin: 0 auto;
}
/* :target 配合锚点使用,点击锚点时,target就被激活了(多个锚点只有一个被激活) */
h2:target {
color:red;
}
</style>
</head>
<body>
<ul>
<li><a href="#1">标题1</a></li>
<li><a href="#2">标题2</a></li>
<li><a href="#3">标题3</a></li>
<li><a href="#4">标题4</a></li>
<li><a href="#5">标题5</a></li>
</ul>
<div>
<h2 id="1">标题1</h2>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<h2 id="2">标题2</h2>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<h2 id="3">标题3</h2>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<h2 id="4">标题4</h2>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<h2 id="5">标题5</h2>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
</div>
</body>
</body>
</html>