平时我们看到一些官方文档都会发现一些类似的结构，左边是一个固定侧边栏目录，右边是内容展示区，点击目录的每一项，右边都会跳转到对应的位置，其实这就是锚点实现的。
图片以elementUI为例子，就是这样一种目录结构。
学过vue的我，一开始以为是用路由来实现的，虽然也可以实现，但着实有些鸡肋。
其实原理十分简单，就是用到一个a标签的锚点来实现的。
<a href="#title1">第一章</a>
<a name="title1">
<div class="item">内容1</div>
</a>
下面是我个人写的一个小demo,点击不同的章节跳转到不同的内容区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.left {
flex: 1;
background-color: rgb(10, 219, 219);
display: flex;
flex-direction: column;
position: fixed;
width: 200px;
height: 100%;
}
.right {
flex: 5;
margin-left: 200px;
background-color: aquamarine;
}
.right a {
display: block;
}
.item {
height: 500px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<a href="#title1">第一章</a>
<a href="#title2">第二章</a>
<a href="#title3">第三章</a>
<a href="#title4">第四章</a>
<a href="#title5">第五章</a>
<a href="#title6">第六章</a>
<a href="#title7">第七章</a>
<a href="#title8">第八章</a>
<a href="#title9">第九章</a>
</div>
<div class="right">
<a name="title1">
<div class="item">内容1</div>
</a>
<a name="title2">
<div class="item">内容2</div>
</a>
<a name="title3">
<div class="item">内容3</div>
</a>
<a name="title4">
<div class="item">内容4</div>
</a>
<a name="title5">
<div class="item">内容5</div>
</a>
<a name="title6">
<div class="item">内容6</div>
</a>
<a name="title7">
<div class="item">内容7</div>
</a>
<a name="title8">
<div class="item">内容8</div>
</a>
<a name="title9">
<div class="item">内容9</div>
</a>
</div>
</div>
</body>
</html>
模板二：推荐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
}
.siderBar{
position: fixed;
top: 0;
left: 0;
background-color: darkcyan;
min-width: 200px;
}
.siderBar a{
display: block;
}
.main {
margin-left: 200px;
flex: 1;
}
.main div{
height: 500px;
}
#a1:nth-of-type(1){
background: #000;
}
#a2:nth-of-type(2){
background: rgb(196, 71, 71);
}
#a3:nth-of-type(3){
background: rgb(18, 184, 59);
}
#a4:nth-of-type(4){
background: rgb(212, 200, 21);
}
</style>
<body>
<div class="container">
<div class="siderBar">
<a href="#a1">第一章</a>
<a href="#a2">第二章</a>
<a href="#a3">第三章</a>
<a href="#a4">第四章</a>
</div>
<div class="main">
<div id="a1">内容1</div>
<div id="a2">内容2</div>
<div id="a3">内容3</div>
<div id="a4">内容4</div>
</div>
</div>
</body>
</html>
附带小知识：
a的target="_blank"会新开一个页面。
<a href="http://" target="_blank" rel="noopener noreferrer"></a>
获取网页的url地址
console.log(location.href)
哈希地址就是#号后面的一段，获取哈希地址方式：
console.log(location.hash)
网友评论