一、如何让目录页码统一右对齐
为了让目录和页码对应更加美观,我们需要统一右对齐,让目录更加整齐。可以通过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属性值,最后将页码设置为该值。