如果你也想這么做，那么你還需要我的getElementByTagNames()函數。
function createTOC() {
var y = document.createElement('div');
y.id = 'innertoc';
var a = y.appendChild(document.createElement('span'));
a.onclick = showhideTOC;
a.id = 'contentheader';
a.innerHTML = 'show page contents';
var z = y.appendChild(document.createElement('div'));
z.onclick = showhideTOC;
var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5');
if (toBeTOCced.length < 2) return false;
for (var i=0;i<toBeTOCced.length;i++) {
var tmp = document.createElement('a');
tmp.innerHTML = toBeTOCced[i].innerHTML;
tmp.className = 'page';
z.appendChild(tmp);
if (toBeTOCced[i].nodeName == 'H4')
tmp.className += ' indent';
if (toBeTOCced[i].nodeName == 'H5')
tmp.className += ' extraindent';
var headerId = toBeTOCced[i].id || 'link' + i;
tmp.href = '#' + headerId;
toBeTOCced[i].id = headerId;
if (toBeTOCced[i].nodeName == 'H2') {
tmp.innerHTML = 'Top';
tmp.href = '#top';
toBeTOCced[i].id = 'top';
}
}
return y;
}
var TOCstate = 'none';
function showhideTOC() {
TOCstate = (TOCstate == 'none') ? 'block' : 'none';
var newText = (TOCstate == 'none') ? 'show page contents' : 'hide page contents';
document.getElementById('contentheader').innerHTML = newText;
document.getElementById('innertoc').lastChild.style.display = TOCstate;
}
解釋
這段代碼運行如下：
準備階段
首先我創建一個<div id="innertoc">來放置表格內容
function createTOC() {
var y = document.createElement('div');
y.id = 'innertoc';
然后在他的上面添加一個<span>標簽。點擊這個元素就會運行showhideTOC()函數，我會在下面解釋。
var a = y.appendChild(document.createElement('span'));
a.onclick = showhideTOC;
a.id = 'contentheader';
a.innerHTML = 'show page contents';
然后我再創建一個DIV用了放置真正的鏈接。在這個div上單擊（真正的含義是：在這個div里的任何一個鏈接上單擊）一樣會觸發showhideTOC()函數。
var z = y.appendChild(document.createElement('div'));
z.onclick = showhideTOC;
得到標題
然后新建一個toBeTOCced數組，再用我的getElementByTagNames()函數來得到整個頁面的左右標題。
var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5');
如果數組里只有一個元素（比如這個頁面只有一個h2標題）就停止。我不想讓ToC只有一個元素。
創建ToC
現在開始創建ToC。首先遍歷toBeTOCced數組。對于每個元素我都創建一個和他們的標題相同的鏈接。注意innerHTML的使用：網站里有些標題包含<code>這樣的HTML標簽，我也想讓這些在ToC里面顯示。我把這些新的鏈接添加在ToC的里面的<div>上。
for (var i=0;i<toBeTOCced.length;i++) {
var tmp = document.createElement('a');
tmp.innerHTML = toBeTOCced[i].innerHTML;
tmp.className = 'page';
z.appendChild(tmp);
如果標題是h4或者h5我就添加一個額外的類。
if (toBeTOCced[i].nodeName == 'H4')
tmp.className += ' indent';
if (toBeTOCced[i].nodeName == 'H5')
tmp.className += ' extraindent';
現在我們需要把a元素鏈接到他真正的標題上。這需要一個唯一的ID。然而，這些標題可能已經包含一個ID了。我不想破壞原有的內部鏈接，所以我更愿意使用標題本來的ID。只有當標題沒有ID的時候我才創建一個新的ID。
var headerId = toBeTOCced[i].id || 'link' + i;
我們剛剛創建的鏈接的href屬性就應該是#+headerId，標題本身也就有了一個ID。
tmp.href = '#' + headerId;
toBeTOCced[i].id = headerId;
一個特殊情況：如果標題是H2，那就是頁面的頂部，也會得到一個ID。
if (toBeTOCced[i].nodeName == 'H2') {
tmp.innerHTML = 'Top';
tmp.href = '#top';
toBeTOCced[i].id = 'top';
}
}
現在表格就生產了，我們返回給調用它的地方。
return y;}
顯示和隱藏ToC
最后這個函數用了顯示和隱藏ToC。非常的簡單，先檢測ToC的狀態，然后根據信息生產一個新的文本和display值。
var TOCstate = 'none';
function showhideTOC() {
TOCstate = (TOCstate == 'none') ? 'block' : 'none';
var newText = (TOCstate == 'none') ? 'show page contents' : 'hide page contents';
document.getElementById('contentheader').innerHTML = newText;
document.getElementById('innertoc').lastChild.style.display = TOCstate;
}
這個函數在用戶點擊<span>的時候調用，那樣他就可以切換ToC的顯示。另外當用戶在鏈接上點擊的時候也會馬上隱藏ToC的。
翻譯地址：http://www.quirksmode.org/dom/toc.html
轉載請保留以下信息
作者：北玉(tw:@rehawk)
