Html给网页中一长段文字添加目录索引超级链接点击目录索引时浏览器自动转到文档相应的位置
要给网页中一长段文字添加目录索引,你可以按照以下步骤进行操作:
- 在网页的适当位置添加一个目录容器,使用
<ul>标签表示无序列表。例如:
<ul id="toc"></ul>
- 将需要添加目录索引的文本分割成段落,并为每个段落设置一个唯一的id。例如:
<h2 id="section1">第一节</h2>
<p>这是第一节的内容。</p>
<h2 id="section2">第二节</h2>
<p>这是第二节的内容。</p>
- 使用JavaScript代码获取目录容器和所有段落元素,并为每个段落元素创建一个目录索引项。例如:
<script>
// 获取目录容器和所有段落元素
var tocContainer = document.getElementById('toc');
var sections = document.querySelectorAll('h2');
// 遍历所有段落元素
sections.forEach(function(section) {
// 创建目录索引项
var listItem = document.createElement('li');
var link = document.createElement('a');
link.href = '#' + section.id;
link.textContent = section.textContent;
listItem.appendChild(link);
// 将目录索引项添加到目录容器
tocContainer.appendChild(listItem);
});
</script>
这样,网页的目录索引就会根据文档中的段落元素自动生成,并且点击目录索引项时,浏览器会自动滚动到相应的位置
原文地址: https://www.cveoy.top/t/topic/iwG1 著作权归作者所有。请勿转载和采集!