首頁猿問如何通過Javascript使用H...

如何通過Javascript使用HTML頁面中現有的標題標簽創建書簽系統

JavaScript

呼啦一陣風 2021-12-12 17:51:42

我想使用 HTML 文檔中的標題創建書簽系統。我想使用標題層次結構來做到這一點。我的標題如下。我試過了，但失敗了。我想要像下面這樣的帶有鏈接的書簽：我的 HTML 代碼： <style> #bookMark { border: 1px solid black; margin-bottom: 10px; } </style> <div id="bookMark"> <b>Book Mark: </b> </div> <h1> This is 1st main Heading1 </h1> <h2> This is h2 under h1 </h2> <h3> This is h3 under h1 and h2 </h3> <h2> This is h2 </h2> <h3> This is h3</h3> <h1> This is 2nd main Heading1 </h1> <h2> This is h2 under h1 </h2> <script src="dom.js"> </script>我的腳本代碼： var heading1 = document.getElementsByTagName('h1'); var heading2 = document.getElementsByTagName('h2'); for(var i = 0; i < heading1.length; i++){ var para = document.createElement("p"); para.innerHTML = document.getElementsByTagName('h1')[i].innerHTML; document.getElementById("bookMark").appendChild(para); for(var j = 0; j < heading2 .length; j++){ var para = document.createElement("p"); para.innerHTML = " "+ document.getElementsByTagName('h2')[j].innerHTML; document.getElementById("bookMark").appendChild(para); } }我的輸出：這不是維護層次結構

查看完整描述

1 回答

ABOUTYOU

TA貢獻1812條經驗獲得超5個贊

為文檔動態創建鏈接內容列表的一種方法是首先制作標題的映射，使用：

const allHeadings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

然后您可以遍歷地圖以構建內容列表：

工作示例：

// GRAB ALL HEADINGS

const allHeadings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

// CREATE MAP OF HEADINGS

let headingsMap = []

allHeadings.forEach((heading) => {

headingLevel = heading.nodeName.replace('H', '');

headingsMap.push(headingLevel);

});

// BUILD CONTENTS LIST

let contentsList = '';

contentsList += '<div class="contents-list">';

contentsList += '<ul>';

for (let i = 0; i < headingsMap.length; i++) {

allHeadings[i].id = '10' + i;

contentsList += '<li>';

contentsList += '<a href="#10' + i;

contentsList += '">' + allHeadings[i].textContent + '</a>';

switch (true) {

case (i === (headingsMap.length - 1)) :

for (j = 0; j < headingsMap[i]; j++) {

contentsList += '</li></ul>';

}

break;

case (headingsMap[(i + 1)] > headingsMap[i]) :

contentsList += '<ul>';

break;

case (headingsMap[(i + 1)] < headingsMap[i]) :

let difference = (headingsMap[i] - headingsMap[(i + 1)]);

for (j = 0; j < difference; j++) {

contentsList += '</li></ul>';

}

break;

}

contentsList += '</div>';

// ADD CONTENTS LIST TO PAGE

let contentsListTemplate = document.createElement('template');

contentsListTemplate.innerHTML = contentsList;

document.body.insertBefore(contentsListTemplate.content, document.body.querySelector('*'));

.contents-list {

color: rgb(127, 0, 0);

font-size: 14px;

line-height: 28px;

text-transform: uppercase;

background-color: rgb(255, 255, 191);

border: 1px solid rgb(127, 0, 0);

}

.contents-list a {

text-decoration: none;

}

.contents-list a:hover {

text-decoration: underline;

}

<h1> This is 1st main Heading1 </h1>

<h2> This is h2 under h1 </h2>

<h3> This is h3 under h1 and h2 </h3>

<h1> This is 2nd main Heading1 </h1>

<h2> This is h2 under h1 </h2>

<h2> This is another h2 under h1 </h2>

反對回復 2021-12-12

1 回答
0 關注
203 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何通過Javascript使用HTML頁面中現有的標題標簽創建書簽系統

如何通過Javascript使用HTML頁面中現有的標題標簽創建書簽系統

1 回答

添加回答