如何讓目錄和頁碼一一對應

一、如何讓目錄頁碼統一右對齊

為了讓目錄和頁碼對應更加美觀，我們需要統一右對齊，讓目錄更加整齊。可以通過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屬性值，最後將頁碼設置為該值。