image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width">
<style>
p {height: 60px;}
.links {border-top: 1px solid #aaa; background-color: #fff; position: fixed; bottom: 0; left: 0; right: 0; display: flex;}
.links>a {line-height: 40px; flex-grow: 1; text-decoration: none; text-align: center; }
:target {background-color: red}
</style>
</head>
<body>
<h3 id="title1">标题1</h3>
<p>内容内容内容</p>
<h3 id="title2">标题2</h3>
<p>内容内容内容</p>
<h3 id="title3">标题3</h3>
<p>内容内容内容</p>
<h3 id="title4">标题4</h3>
<p>内容内容内容</p>
<h3 id="title5">标题5</h3>
<p>内容内容内容</p>
<h3 id="title6">标题6</h3>
<p>内容内容内容</p>
<div class="links">
<a href="#title1">标题1</a>
<a href="#title2">标题2</a>
<a href="#title3">标题3</a>
<a href="#title4">标题4</a>
<a href="#title5">标题5</a>
<a href="#title6">标题6</a>
</div>
</body>
</html>
点击 a 标签中的标题1，会跳到 id 为 title1 的标题位置，并通过伪选择器 :target 匹配到标题1元素，并添加 background-color: red 样式。
网友评论