使用JavaScript自动生成Wikipedia样式的目录_Javascript_Html Table_Html Lists_Tableofcontents

使用JavaScript自动生成Wikipedia样式的目录

javascript

使用JavaScript自动生成Wikipedia样式的目录,javascript,html-table,html-lists,tableofcontents,Javascript,Html Table,Html Lists,Tableofcontents,标题是不言自明的。手动完成此操作的示例如下： <head> <style> .toc { border: thin solid lightgray; background-color: whitesmoke; } </style> </head> <body> <h1>Article title</h1> <hr /> <p>

标题是不言自明的。手动完成此操作的示例如下：

<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）开始计数。手动执行此操作非常耗时。默认情况下，所有及时可用的目录库的功能或样式与文章中的不一样。这些库中的大多数并不完全是轻量级的，这也不方便。可以使用“调整”来渲染预期结果

ol{ 计数器重置：节；/*创建每个ol的区段计数器元素*/ 列表样式类型：无； } 李：以前{ 计数器增量：节；/*仅增量此实例分区计数器的*/ 内容：counterssection，.；/*组合所有实例的值分段计数器的编号，分开一段时间*/ } 项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目

从什么源材料生成？“到目前为止你都尝试了些什么？”亚历山大说，“一切都是源材料。”。我只是在问题下面编辑了上面的代码。