平時(shí)我們看到一些官方文檔都會(huì)發(fā)現(xiàn)一些類(lèi)似的結(jié)構(gòu)，左邊是一個(gè)固定側(cè)邊欄目錄，右邊是內(nèi)容展示區(qū)，點(diǎn)擊目錄的每一項(xiàng)，右邊都會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的位置，其實(shí)這就是錨點(diǎn)實(shí)現(xiàn)的。
圖片以elementUI為例子，就是這樣一種目錄結(jié)構(gòu)。
學(xué)過(guò)vue的我，一開(kāi)始以為是用路由來(lái)實(shí)現(xiàn)的，雖然也可以實(shí)現(xiàn)，但著實(shí)有些雞肋。
其實(shí)原理十分簡(jiǎn)單，就是用到一個(gè)a標(biāo)簽的錨點(diǎn)來(lái)實(shí)現(xiàn)的。
<a href="#title1">第一章</a>
<a name="title1">
<div class="item">內(nèi)容1</div>
</a>
下面是我個(gè)人寫(xiě)的一個(gè)小demo,點(diǎn)擊不同的章節(jié)跳轉(zhuǎn)到不同的內(nèi)容區(qū)域。
<!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">內(nèi)容1</div>
</a>
<a name="title2">
<div class="item">內(nèi)容2</div>
</a>
<a name="title3">
<div class="item">內(nèi)容3</div>
</a>
<a name="title4">
<div class="item">內(nèi)容4</div>
</a>
<a name="title5">
<div class="item">內(nèi)容5</div>
</a>
<a name="title6">
<div class="item">內(nèi)容6</div>
</a>
<a name="title7">
<div class="item">內(nèi)容7</div>
</a>
<a name="title8">
<div class="item">內(nèi)容8</div>
</a>
<a name="title9">
<div class="item">內(nèi)容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">內(nèi)容1</div>
<div id="a2">內(nèi)容2</div>
<div id="a3">內(nèi)容3</div>
<div id="a4">內(nèi)容4</div>
</div>
</div>
</body>
</html>
附帶小知識(shí)：
a的target="_blank"會(huì)新開(kāi)一個(gè)頁(yè)面。
<a href="http://" target="_blank" rel="noopener noreferrer"></a>
獲取網(wǎng)頁(yè)的url地址
console.log(location.href)
哈希地址就是#號(hào)后面的一段，獲取哈希地址方式：
console.log(location.hash)
