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>