1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <script>
6
7
8 /**
9 * toc.js : 根据文档内容生成table
10 *
11 * 本模块注册一个当文档加载完成后会自动运行的匿名函数。
12 * 改函数运行时首先查看文档中id为TOC的元素，如果没有找到
13 * 则在文档开头创建它
14 *
15 * 接下来，函数寻找文档中所有的<h1>到<h6>标签，并将其当做章节标题，
16 * 然后以此为内容在TOC元素中创建一个table。该函数为每一个章节标题编号
17 * 并且为每一个h标签添加命名的描点，这样就可以通过点击TOC中table连接到对应章节。
18 * 生成的锚点一TOC作为前缀，所以你应该在自己的HTML代码中避免使用这个前缀
19 *
20 * 生成的目录入口可以用css进行格式。所有的入口具有类标识"TOCEntry"，入口同时根据<h>
21 * 的级别拥有对应的类标志，如<h1>对应类标识为"TOCLevel1",<h2>对应类标志为"TOCLevel2"。
22 * 插入到头部的章节编号具有类标志"TOCSectNum"
23 *
24 * 你可以在本模块中使用如下样式表
25 * #TOC { border: solid black 1px; margin: 10px; padding: 10px; }
26 * .TOCEntry { font-family: sans-serif; }
27 * .TOCEntry a { text-decoration: none; }
28 * .TOCLevel1 { font-size: 16pt; font-weight: bold; }
29 * .TOCLevel2 { font-size: 12pt; margin-left: .5in; }
30 * .TOCSecNum:after { content: ": "; }
31 *
32 */
33
34 function toc()
35 {
36 // Find the TOC container element.
37 // If there isn't one, create one at the start of the document.
38 var toc = document.getElementById("TOC");
39 if (!toc) {
40 toc = document.createElement("div");
41 toc.id = "TOC";
42 document.body.insertBefore(toc, document.body.firstChild);
43 }
44 // Find all section heading elements
45 var headings;
46 if (document.querySelectorAll) // Can we do it the easy way?
47 headings = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
48 else // Otherwise, find the headings the hard way
49 headings = findHeadings(document.body, []);
50 // Recursively traverse the document body looking for headings
51 function findHeadings(root, sects) {
52 for(var c = root.firstChild; c != null; c = c.nextSibling) {
53 if (c.nodeType !== 1) continue;
54 if (c.tagName.length == 2 && c.tagName.charAt(0) == "H")
55 sects.push(c);
56 else
57 findHeadings(c, sects);
58 }
59 return sects;
60 }
61 // Initialize an array that keeps track of section numbers.
62 var sectionNumbers = [0,0,0,0,0,0];
63 // Now loop through the section header elements we found.
64 for(var h = 0; h < headings.length; h++) {
65 var heading = headings[h];
66 // Skip the section heading if it is inside the TOC container.
67 if (heading.parentNode == toc) continue;
68 // Figure out what level heading it is.
69 var level = parseInt(heading.tagName.charAt(1));
70 if (isNaN(level) || level < 1 || level > 6) continue;
71 // Increment the section number for this heading level
72 // and reset all lower heading level numbers to zero.
73 sectionNumbers[level-1]++;
74 for(var i = level; i < 6; i++) sectionNumbers[i] = 0;
75 // Now combine section numbers for all heading levels
76 // to produce a section number like 2.3.1.
77 var sectionNumber = sectionNumbers.slice(0,level).join(".")
78 // Add the section number to the section header title.
79 // We place the number in a <span> to make it styleable.
80 var span = document.createElement("span");
81 span.className = "TOCSectNum";
82 span.innerHTML = sectionNumber;
83 heading.insertBefore(span, heading.firstChild);
84 // Wrap the heading in a named anchor so we can link to it.
85 var anchor = document.createElement("a");
86 anchor.name = "TOC"+sectionNumber;
87 heading.parentNode.insertBefore(anchor, heading);
88 anchor.appendChild(heading);
89 // Now create a link to this section.
90 var link = document.createElement("a");
91 link.href = "#TOC" + sectionNumber; // Link destination
92 link.innerHTML = heading.innerHTML; // Link text is same as heading
93 // Place the link in a div that is styleable based on the level.
94 var entry = document.createElement("div");
95 entry.className = "TOCEntry TOCLevel" + level;
96 entry.appendChild(link);
97 // And add the div to the TOC container.
98 toc.appendChild(entry);
99 }
100 }
101
102 window.onload = toc;
103 </script>
104
105 <style>
106
107 #TOC { border: solid black 1px; margin: 10px; padding: 10px; }
108 .TOCEntry { font-family: sans-serif; }
109 .TOCEntry a { text-decoration: none; }
110 .TOCLevel1 { font-size: 16pt; font-weight: bold; }
111 .TOCLevel2 { font-size: 12pt; margin-left: .5in; }
112 .TOCSectNum:after { content: ": "; }
113
114
115 </style>
116
117 </head>
118
119 <body>
120
121 <h1>h1</h1>
122 <h2>h2</h2>
123 <h1>h1</h1>
124 <h2>h2</h2><h2>h2</h2><h1>h1</h1>
125 <h1>h1</h1><h2>h2</h2><h2>h2</h2>
126 <h1>h1</h1><h2>h2</h2>
127 </body>
128
129 </html>
