目录怎么自动生成 - 承德气象网

关于目录怎么自动生成的知识点，承德气象网将为你整理了下面这些知识。

目录怎么自动生成

目录自动生成是现在很常见的功能，对于长文档的处理非常有用。那么目录怎么自动生成呢？

1、为什么要自动生成目录

有些文章长度可能很长，页数多，尤其是科技类、专业性强的文章。自动生成目录在这类文章中非常必要。

目录能够方便读者从大纲上了解全文脉络，并且通过目录快速定位到自己需要阅读的内容。

2、怎样实现目录自动生成

实现自动生成目录需要借助一些工具和技术。以下是目前流行的两种实现方式：

2.1、使用JS插件实现

目前有一些JS插件可以用来实现目录自动生成，比如Tocbot、jQuery.toc 等。使用这些插件，我们只需要在页面中添加一段代码即可，非常方便。

示例代码：

  <script src="jquery.min.js"></script>
  <script src="jquery.toc.js"></script>
  <div id="toc"></div>
  <script>
    $('article').toc();
  </script>

2.2、使用CSS实现

如果你不想使用JS插件，也可以使用CSS样式来实现。

示例代码：

article {
	position: relative;
	padding-left: 3em;
}
h2:before {
	content: counter(a) ". ";
	counter-increment: a 1;
	position: absolute;
	left: 0;
	font-size: 1.2em;
}
h3:before {
	content: counter(b) ". ";
	counter-increment: b 1;
	position: absolute;
	left: 0.5em;
	font-size: 1.1em;
}