如何让目录和页码一一对应

发布时间：2023-05-17

一、如何让目录页码统一右对齐

为了让目录和页码对应更加美观，我们需要统一右对齐，让目录更加整齐。可以通过CSS样式表设置目录的对齐方式。

.table-of-contents {
    text-align: right;
}

然后在HTML代码中将表格的 class 属性设置为 table-of-contents 即可。

二、如何使目录页码和正文第一页相同

让目录页码和正文第一页相同是很重要的一步，这样便于读者快速定位。 可以在正文第一页设置一个锚点，将锚点的名称设置为目录页码所对应的章节标题。目录的链接指向这个锚点，这样就能够确保目录页码和正文第一页的章节标题相同了。

<h1 id="chapter-1">第一章 章节标题</h1>
<!-- 目录页码指向这个锚点 -->
<a href="#chapter-1">1</a> 章节标题

三、如何把目录和页码对应

为了将目录和页码一一对应，建议使用表格来呈现目录。表格每一行包括两列，第一列为章节标题，第二列为页码，两列之间可以用一个空的单元格隔开。 可以利用 JavaScript 来实现在正文中自动添加页码。下面是一个简单的示例：

let pageCount = 1;
document.querySelectorAll('.page').forEach(function (page) {
    page.setAttribute('data-page', pageCount++);
});

这个 JavaScript 代码遍历了所有的 .page 类，将它们的 data-page 属性设置为 1, 2, 3, ...。

四、如何在目录后对应页码

我们可以在目录下面添加一个“页码索引”，将每一个章节的页码对应显示出来。

<h2>页码索引</h2>
<table>
    <tr>
        <td>第一章 章节标题</td>
        <td>1</td>
    </tr>
    <tr>
        <td>第二章 章节标题</td>
        <td>5</td>
    </tr>
    <tr>
        <td>第三章 章节标题</td>
        <td>10</td>
    </tr>
</table>

五、如何将正文与目录页码一一对应

最后一个步骤是将正文中的章节标题和页码一一对应起来。可以利用锚点和 JavaScript 实现这个功能。 在 HTML 代码中为每一章节标题设置一个唯一的 id，然后在目录中的链接中指定该章节标题的 id。当点击目录中的链接时，浏览器将会跳转到对应的章节标题。这个时候我们可以利用 JavaScript 获取当前页面的锚点，然后设置页码。

<h1 id="chapter-1">第一章 章节标题</h1>
<a href="#chapter-1">1</a> 章节标题
...
<script>
    let currentPage = window.location.hash.substring(1);
    let currentPageNumber = document.getElementById(currentPage).getAttribute('data-page');
    document.querySelector('.page-number').textContent = currentPageNumber;
</script>

这个 JavaScript 代码首先获取当前页面的锚点，然后找到该锚点所对应的章节标题的 data-page 属性值，最后将页码设置为该值。

推荐文章