2017-08-01 79 views
0

標題標題不言自明。這方面的一個說明性示例手動完成:使用JavaScript自動生成維基百科風格的目錄

<head> 
    <style> 
    .toc { 
     border: thin solid lightgray; 
     background-color: whitesmoke; 
    } 
    </style> 
</head> 


<body> 

    <h1>Article title</h1> 
    <hr /> 
    <p>Some introductory text.</p> 

    <span id="toc"> 
    <table class="toc"> 
     <thead> 
     <tr> 
      <th>Contents</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td> 
      <ol> 
       <li><a href="#1">Heading</a></li> 
       <ol> 
       <li><a href="#1.1">Sub-heading</a></li> 
       <ol> 
        <li><a href="#1.1.1">Sub-sub-heading</a></li> 
       </ol> 
       </ol> 
       <li><a href="#2">Second heading</a></li> 
       <ol> 
       <li><a href="#2.1">Second sub-heading</a></li> 
       <ol> 
        <li><a href="#2.1.1">Second sub-sub-heading</a></li> 
       </ol> 
       </ol> 
       <li><a href="#3">See also</a></li> 
       <li><a href="#4">Notes &amp; References</a></li> 
       <li><a href="#5">Further reading</a></li> 
       <li><a href="#6">External links</a></li> 
      </ol> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </span> 

    <div id="Contents"> 
    <h1 id="1">Heading</h1> 
    <hr /> 
    <h2 id="1.1">Sub-heading</h2> 
    <h3 id="1.1.1">Sub-sub-heading</h3> 
    <h1 id="2">Second heading</h1> 
    <hr /> 
    <h2 id="2.1">Second sub-heading</h2> 
    <h3 id="2.1.1">Second sub-sub-heading</h3> 
    <h1 id="3">See also</h1> 
    <hr /> 
    <h1 id="4">Notes &amp; References</h1> 
    <hr /> 
    <h1 id="5">Further reading</h1> 
    <hr /> 
    <h1 id="6">External links</h1> 
    <hr /> 
    </div> 

</body> 

問題:

  1. 通知從1嵌套列表重新開始,而不是從父枚舉(例如,「1,1.1,1.1進展其計數。 1" )。
  2. 手動執行此操作非常耗時。
  3. 所有即時可用的「目錄」庫默認不起作用或風格,如Wikipedia文章中的那樣。這些庫大部分並不完全是「輕量級」的,這也是一個不便之處。
+0

由什麼原料生成?你到目前爲止嘗試過什麼? –

+0

@AlexanderNied'

'內的所有內容' –

+0

'

'中的所有內容均爲原始素材。我剛纔在問題下編輯了上面的代碼。 –

回答

1

您可以使用CSS counters調整呈現預期的結果

ol { 
 
    counter-reset: section;    /* Creates a new instance of the 
 
              section counter with each ol 
 
              element */ 
 
    list-style-type: none; 
 
} 
 

 
li::before { 
 
    counter-increment: section;   /* Increments only this instance 
 
              of the section counter */ 
 
    content: counters(section, ".") " "; /* Combines the values of all instances 
 
              of the section counter, separated 
 
              by a period */ 
 
}
<ol> 
 
    <li>item</li>   <!-- 1  --> 
 
    <li>item    <!-- 2  --> 
 
    <ol> 
 
     <li>item</li>  <!-- 2.1 --> 
 
     <li>item</li>  <!-- 2.2 --> 
 
     <li>item   <!-- 2.3 --> 
 
     <ol> 
 
      <li>item</li> <!-- 2.3.1 --> 
 
      <li>item</li> <!-- 2.3.2 --> 
 
     </ol> 
 
     <ol> 
 
      <li>item</li> <!-- 2.3.1 --> 
 
      <li>item</li> <!-- 2.3.2 --> 
 
      <li>item</li> <!-- 2.3.3 --> 
 
     </ol> 
 
     </li> 
 
     <li>item</li>  <!-- 2.4 --> 
 
    </ol> 
 
    </li> 
 
    <li>item</li>   <!-- 3  --> 
 
    <li>item</li>   <!-- 4  --> 
 
</ol> 
 
<ol> 
 
    <li>item</li>   <!-- 1  --> 
 
    <li>item</li>   <!-- 2  --> 
 
</ol>