使用JavaScript自动生成维基百科风格的目录

标题标题不言自明。这方面的一个说明性示例手动完成：使用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" ）。
手动执行此操作非常耗时。
所有即时可用的“目录”库默认不起作用或风格，如Wikipedia文章中的那样。这些库大部分并不完全是“轻量级”的，这也是一个不便之处。

来源

2017-08-01 Richard Santiago

由什么原料生成？你到目前为止尝试过什么？ –

@AlexanderNied'

'内的所有内容' –

'中的所有内容均为原始素材。我刚才在问题下编辑了上面的代码。 –

您可以使用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>

来源

2017-08-01 01:47:54 guest271314

使用JavaScript自动生成维基百科风格的目录

回答

相关问题