js代碼如下,我只是記錄下代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
scroll-behavior: smooth;
}
</style>
</head>
<body>
<ul id="catalog">
<h1>章節目錄</h1>
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id="第一章">這是位置</span>
<h2>第一章</h2>
<h3>第一章第二小節</h3>
<h2>第二章</h2>
<h3>第二章第二小節</h3>
<h3>第二章第三小節</h3>
<h3>第二章第四小節</h3>
<h2>第三章</h2>
<h2>第四章</h2>
<h2>第五章</h2>
<h3>第五章第一節</h3>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
function AddLi(i){
let oLi = document.createElement("li");
let a = document.createElement("a");
oLi.append(a);
a.href = "#"+i.innerText;
a.innerHTML = i.innerText;
return oLi
}
let hs = document.querySelectorAll("h2, h3");
for(let i of hs){
i.id = i.innerText;
if(i.tagName == "H2"){
let oLi = AddLi(i); // 添加組裝好的li標簽
oLi.className = "one";
document.querySelector("#catalog").append(oLi);
}else{
let li = document.querySelectorAll(".one");
// 首先在判斷最后一個標簽有沒有ul標簽
let obj = li[li.length-1].querySelectorAll("ul");
console.log(obj);
if(obj.length){
// 有ul標簽
console.log("有ul標簽");
// 就把ul標簽取出來,然后把li標簽放進去
let obj_ul = document.querySelectorAll(".two")
let oli = AddLi(i)
obj_ul[obj_ul.length-1].append(oli);
}else{
// 沒有ul標簽
console.log("沒有ul標簽");
// 創建一個ul標簽
let obj_ul = document.createElement("ul");
obj_ul.className = "two";
// 然后再ul標簽中添加li標簽
let oLi = AddLi(i);
obj_ul.append(oLi);
// 把這個ul標簽放道第一級最后一個li標簽中
let obj_li = document.querySelectorAll(".one");
obj_li[obj_li.length-1].append(obj_ul);
}
// 如果沒有ul標簽,就到上一個li標簽里面新建添加ul標簽
// 如果有ul標簽,那么就不用創建ul標簽了,就直接在ul標簽里面添加li標簽
}
}
</script>
</body>
</html>