自动生成目录

任何包含清晰且标记良好的内容的长页面都可以从目录中受益。目录提供了一种快速方法，可以跳至页面上的所需部分。当然，您可以手动创建目录，但最好使用 JavaScript 动态生成。 这是由于以下几个原因

• 更简单 – 只需编写一次 JavaScript 代码，它就可以在您需要的每个页面上创建目录。
• 更可靠 – JavaScript 代码不受作者错误的影响。
• 仍然可访问 – 目录对于辅助功能的概念很有用，但它是一个额外功能（没有它不会破坏页面），并且几乎所有屏幕阅读器都运行 JavaScript。

这种事情已经做过很多次，而且方法很多。但这次是我们的！此外，它也是一个很好的教程。

HTML：标题和 ID

一个包含多个您希望链接到的不同部分的长页面可以用多种方式进行标记。也许一个常见问题页面可以是 <dl>。它实际上可以是 <section> 后面的 <section>。在本例中，我们假设以下结构

<article>

   <h3 id="question-one">Title of Question</h3>
   <!-- whatever other content, probably some paragraphs and stuff. -->

   <h3 id="question-two">Another Question</h3>
   <!-- whatever other content, probably some paragraphs and stuff. -->

   <!-- etc -->

</article>

一个完全合法的页面，其中包含带有 ID 的标题以及它们之间的内容。请注意 ID。它们是唯一的，就像任何好的 ID 一样。这是必需的，因为它为我们提供了链接目标。

像这样的链接

<a href="#question-one">Link to Question One</a>

单击后将跳至页面下方，直到具有 ID“question-one”的元素出现在视野中。

使用 jQuery 生成目录

我们的目标是在页面上以目录的形式注入 HTML。如下所示

<nav role="navigation" class="table-of-contents">
  <h2>On this page:</h2>
  <ul>
    <li><a href="#question-one">Question One</a></li>
  </ul>
</nav>

在 <nav> 中使用列表？ 是的。

步骤 1：HTML 字符串

我们将完全动态地构建它。也许使用某种 JavaScript 模板来完成此操作会更明智。但嘿，这太简单了，我们只需构建一个大字符串并将其附加。

var ToC =
  "<nav role='navigation' class='table-of-contents'>" +
    "<h2>On this page:</h2>" +
    "<ul>";

我们在那里留下了几个未关闭的标签，我们将在完成之前关闭它们。

步骤 2：遍历标题

页面上的 <h3> 指示了我们希望链接到的每个部分，因此我们将使用 jQuery 选择器找到所有这些标题，然后遍历每个标题。

$("article h3").each(function() {

  // loop

});

步骤 3：获取我们需要的数据

我们需要 1) 每个标题的文本，我们将将其转换为链接；2) 每个标题的 ID，我们可以将其转换为该链接的 href 属性。

var el, title, link;

$("article h3").each(function() {

  el = $(this);
  title = el.text();
  link = "#" + el.attr("id");

});

在循环内部，“this”指的是当前目标的标题元素。我们将“el”设置为它的 jQuery 版本，以便我们可以使用 jQuery 方法提取文本和 ID。

步骤 4：创建一个新的列表项并将其附加到字符串

var newLine, el, title, link;

$("article h3").each(function() {

  el = $(this);
  title = el.text();
  link = "#" + el.attr("id");

  newLine =
    "<li>" +
      "<a href='" + link + "'>" +
        title +
      "</a>" +
    "</li>";

  ToC += newLine;

});

那里的“+=”表示“将此新字符串附加到存储在此变量中的已存在字符串”。

步骤 5：关闭“模板”

ToC +=
   "</ul>" +
  "</nav>";

步骤 6：将 HTML 注入页面

现在，您需要确定要将此新生成的目录注入到页面的哪个位置。将其放在页面顶部可能是明智之举。

我们的示例使用 <article> 来包装所有内容，因此要注入到该内容的顶部，我们将执行以下操作

$("article").prepend(ToC);

在“现实生活中”，您可能会定位一个标题并使用 insertAfter 或 jQuery 的其他一些花哨的 DOM 插入方法。

演示

Table of Contents demo on CodePen

为了在演示中增加一些额外的风格，我使用了 :target 选择器来突出显示您跳至该问题时的问题标题。使它更容易被注意到。就像 来自本教程。