DIV CSS 佈局教程網

如果你也想這麼做，那麼你還需要我的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)