<script type="text/javascript"> 
// 說(shuō)明：用 Javascript 和 CSS 實(shí)現(xiàn)腳注（Footnote）效果 
var footNotes = function(){}; 
footNotes.prototype = { 
footNoteClassName : "footnote", // 腳注的 className 
footNoteTagName : "span", // 腳注的標(biāo)簽名 
footNoteBackLink : " [back]", // 返回鏈接 
format : function(contentID, footnoteID) 
{ 
if (!document.getElementById) return false; 
var content = document.getElementById(contentID); 
var footnote = document.getElementById(footnoteID); 
var spans = content.getElementsByTagName(this.footNoteTagName); 
var noteArr = []; 
var note = 0; 
var elContent; 
var len = spans.length; 
for (i=0; i<len; i++) 
{ 
note ++; 
if (spans[i].className == this.footNoteClassName) 
{ 
// 獲取腳注內(nèi)容 
elContent = spans[i].innerHTML; 
noteArr.push(elContent); 
// 創(chuàng)建一個(gè)指向腳注的鏈接 
var newEle = document.createElement( "a" ); 
newEle.href = '#ftn_' + footnoteID + '_' + note; 
newEle.title = "show footnote"; 
newEle.id = 'ftnlink_'+footnoteID+'_' + note; 
newEle.innerHTML = note; 
// 清空原有內(nèi)容 
while (spans[i].childNodes.length) 
{ 
spans[i].removeChild( spans[i].firstChild ); 
} 
spans[i].appendChild( newEle ); 
} 
} 
// 創(chuàng)建注釋列表 
var ul = this.__buildNoteList(noteArr, footnoteID); 
footnote.appendChild(ul); 
}, 
__buildNoteList : function(notes, noteID) 
{ 
if(!notes || notes.length < 1) return; 
var ul = document.createElement('ul'); 
ul.className = this.footNoteClassName; 
var li; 
var len = notes.length + 1; 
for(i=1; i<len; i++) 
{ 
li = document.createElement('li'); 
li.id = "ftn_"+noteID+"_"+i; 
li.innerHTML = notes[i-1]; 
// 創(chuàng)建【返回】鏈接 
var link = document.createElement("a"); 
link.href = "#ftnlink_" + noteID + "_" + i; 
link.innerHTML = this.footNoteBackLink; 
li.appendChild( link ); 
ul.appendChild( li ); 
} 
return ul; 
} 
}; 
</script> 

要實(shí)現(xiàn)腳注，我們需要下列元素：

復(fù)制代碼代碼如下:

 
<div id="article1"> 
CSS <span class="footnote">CSS 是 Cascading Style Sheet 的縮寫(xiě)。譯作「層疊樣式表單」。是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。</span> 
</div> 
<div id="artnotes1" class="footnoteHolder"></div> 

其中：
article1 是你需要腳注的文章主體
<span class="footnote"> .. </span> 是注釋內(nèi)容，標(biāo)簽 span 和 class 均可配置。
artnotes1 是顯示腳注的地方
按照默認(rèn)的設(shè)置調(diào)用方式：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var footnote = new footNotes(); 
footnote.format('article1','artnotes1'); 
</script> 

如果你想自定義一些內(nèi)容，可以用下面的方式：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var footnote = new footNotes(); 
footnote.footNoteClassName = "footnote2"; 
footnote.footNoteTagName = "em"; 
footnote.footNoteBackLink = " [back &laquo;]"; 
footnote.format('article1','artnotes1'); 
</script> 

測(cè)試代碼：將下面的代碼保存運(yùn)行。

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<meta name="keywords" content="注釋, css, Javascript, footnote, 腳注, " /> 
<meta name="description" content="腳注（Footnote）是向用戶提供更多信息的一個(gè)最佳途徑，也是主體信息的一個(gè)有效補(bǔ)充，常見(jiàn)于各種印刷書(shū)籍中。不過(guò)，既然腳注有這些好處，我們當(dāng)然要在網(wǎng)頁(yè)中也加以利用，本文向您介紹了用 Javascript 和 CSS 實(shí)現(xiàn)腳注效果的方法。" /> 
<title>用 Javascript 和 CSS 實(shí)現(xiàn)腳注（Footnote）效果 - 注釋, css, Javascript, footnote, 腳注, </title> 
</head> 
<body> 
<div class="ad"> 
</div> 
<br /> 
<div id="example"> 
    <h3 id="example_title">用&nbsp;Javascript&nbsp;和&nbsp;CSS&nbsp;實(shí)現(xiàn)腳注（Footnote）效果</h3> 
    <div id="example_main"> 
<!--************************************* 實(shí)例代碼開(kāi)始 *************************************--> 
<style type="text/css"> 
a { 
    font-weight: bold; 
    text-decoration: none; 
    color: #f30; 
} 
a:hover { 
    color: #FFA200; 
} 
#wrapper { 
    width: 500px; 
    margin: 0 auto; 
    text-align: left; 
} 
#wrapper p {line-height:200%;font-size:14px;} 
/* 
================================================ 
styling for footnotes begins here 
================================================ 
*/ 
div.footnoteHolder { 
    border-left: 1px solid #ccc; 
    margin: 20px 0 50px 20px; 
    padding: 20px 10px; 
    font-size: 12px; 
    line-height: 150%; 
} 
span.footnote { 
    vertical-align: super; 
    font-size: 10px; 
} 
ul.footnote, ul.footnote li { 
    margin:0; 
    padding:0; 
} 
ul.footnote li { 
    list-style-type:decimal; 
    margin:3px 0 3px 20px; 
    color:#777; 
} 
em.footnote2 { 
    vertical-align: super; 
    font-size:10px; 
} 
ul.footnote2, ul.footnote2 li { 
    margin:0; 
    padding:0; 
} 
ul.footnote2 li { 
    list-style-type:decimal; 
    margin:3px 0 3px 20px; 
    color:#678BB2; 
} 
</style> 
<script type="text/javascript"> 
// 說(shuō)明：用 Javascript 和 CSS 實(shí)現(xiàn)腳注（Footnote）效果 
// 作者：CodeBit.cn ( http://www.CodeBit.cn ) 
var footNotes = function(){}; 
footNotes.prototype = { 
    footNoteClassName : "footnote",    // 腳注的 className 
    footNoteTagName : "span",    // 腳注的標(biāo)簽名 
    footNoteBackLink : " [back]",    // 返回鏈接 
    format : function(contentID, footnoteID) 
    { 
        if (!document.getElementById) return false; 
        var content = document.getElementById(contentID); 
        var footnote = document.getElementById(footnoteID); 
        var spans = content.getElementsByTagName(this.footNoteTagName); 
        var noteArr = []; 
        var note = 0; 

        var elContent; 
        var len = spans.length; 
        for (i=0; i<len; i++) 
        { 
            note ++; 
            if (spans[i].className == this.footNoteClassName) 
            { 
                // 獲取腳注內(nèi)容 
                elContent = spans[i].innerHTML; 
                noteArr.push(elContent); 
                // 創(chuàng)建一個(gè)指向腳注的鏈接 
                var newEle = document.createElement( "a" ); 
                newEle.href = '#ftn_' + footnoteID + '_' + note; 
                newEle.title = "show footnote"; 
                newEle.id = 'ftnlink_'+footnoteID+'_' + note; 

                newEle.innerHTML = note; 

                // 清空原有內(nèi)容 
                while (spans[i].childNodes.length) 
                { 
                    spans[i].removeChild( spans[i].firstChild ); 
                } 

                spans[i].appendChild( newEle ); 
            } 
        } 
        // 創(chuàng)建注釋列表 
        var ul = this.__buildNoteList(noteArr, footnoteID); 
        footnote.appendChild(ul); 
    }, 
    __buildNoteList : function(notes, noteID) 
    { 
        if(!notes || notes.length < 1) return; 

        var ul = document.createElement('ul'); 
        ul.className = this.footNoteClassName; 
        var li; 
        var len = notes.length + 1; 
        for(i=1; i<len; i++) 
        { 
            li = document.createElement('li'); 
            li.id = "ftn_"+noteID+"_"+i; 
            li.innerHTML = notes[i-1]; 
            // 創(chuàng)建【返回】鏈接 
            var link = document.createElement("a"); 
            link.href = "#ftnlink_" + noteID + "_" + i; 
            link.innerHTML = this.footNoteBackLink; 
            li.appendChild( link ); 
            ul.appendChild( li ); 
        } 
        return ul; 
    } 
}; 
</script> 
<div id="wrapper"> 
<div id="content"> 
    <div id="article1"> 

    <h2>Article 1</h2> 
    <p>在編程的過(guò)程中，我們通常都會(huì)積累很多簡(jiǎn)單、有效并且可重用的小段代碼，一個(gè)簡(jiǎn)單的字符串處理函數(shù)<span class="footnote">函數(shù)是將唯一的輸出值賦予每一輸入的『法則』(Wikipedia)。</span>或者一個(gè)驗(yàn)證郵件地址的正則表達(dá)式<span class="footnote">正則表達(dá)式(Regular Expression)描述了一種字符串匹配的模式，可以用來(lái)檢查一個(gè)串是否含有某種子串、將匹配的子串做替換或者從某個(gè)串中取出符合某個(gè)條件的子串等。</span>，又或者一個(gè)簡(jiǎn)單的文件上傳類，甚至一個(gè)效果不錯(cuò)的CSS<span class="footnote">CSS 是 Cascading Style Sheet 的縮寫(xiě)。譯作「層疊樣式表單」。是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。 </span>導(dǎo)航樣式。這些小技巧為我們節(jié)省了不少時(shí)間，但是時(shí)間一長(zhǎng)，代碼數(shù)量越來(lái)越多，尋找起來(lái)也耗費(fèi)了不少時(shí)間。因此，本站致力于收集整理一些類似的小知識(shí)，并且努力提高文章搜索質(zhì)量，一來(lái)方便大家查閱，二來(lái)也算是支持一下開(kāi)源事業(yè)。 
    </p> 
    <p>本站收集的代碼和教程中，有從世界著名開(kāi)源軟件中摘取的函數(shù)、類<span class="footnote">類是對(duì)某個(gè)對(duì)象的定義。它包含有關(guān)對(duì)象動(dòng)作方式的信息，包括它的名稱、方法、屬性和事件。</span>，也有網(wǎng)友提交的原創(chuàng)或翻譯的精彩文章。本站的收錄代碼的標(biāo)準(zhǔn)是：簡(jiǎn)單、精彩、通用。 
    </p> 

    </div> 

    <div id="artnotes1" class="footnoteHolder"></div> 

    <div id="article2"> 

    <h2>Article 2</h2> 
    <p>在編程的過(guò)程中，我們通常都會(huì)積累很多簡(jiǎn)單、有效并且可重用的小段代碼，一個(gè)簡(jiǎn)單的字符串處理函數(shù)<em class="footnote2">函數(shù)是將唯一的輸出值賦予每一輸入的『法則』(Wikipedia)。</em>或者一個(gè)驗(yàn)證郵件地址的正則表達(dá)式<em class="footnote2">正則表達(dá)式(Regular Expression)描述了一種字符串匹配的模式，可以用來(lái)檢查一個(gè)串是否含有某種子串、將匹配的子串做替換或者從某個(gè)串中取出符合某個(gè)條件的子串等。</em>，又或者一個(gè)簡(jiǎn)單的文件上傳類，甚至一個(gè)效果不錯(cuò)的CSS<em class="footnote2">CSS 是 Cascading Style Sheet 的縮寫(xiě)。譯作「層疊樣式表單」。是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。 </em>導(dǎo)航樣式。這些小技巧為我們節(jié)省了不少時(shí)間，但是時(shí)間一長(zhǎng)，代碼數(shù)量越來(lái)越多，尋找起來(lái)也耗費(fèi)了不少時(shí)間。因此，本站致力于收集整理一些類似的小知識(shí)，并且努力提高文章搜索質(zhì)量，一來(lái)方便大家查閱，二來(lái)也算是支持一下開(kāi)源事業(yè)。 
    </p> 
    <p>本站收集的代碼和教程中，有從世界著名開(kāi)源軟件中摘取的函數(shù)、類<em class="footnote2">類是對(duì)某個(gè)對(duì)象的定義。它包含有關(guān)對(duì)象動(dòng)作方式的信息，包括它的名稱、方法、屬性和事件。</em>，也有網(wǎng)友提交的原創(chuàng)或翻譯的精彩文章。本站的收錄代碼的標(biāo)準(zhǔn)是：簡(jiǎn)單、精彩、通用。 
    </p> 

    </div> 

    <div id="artnotes2" class="footnoteHolder"></div> 
</div> 
<script type="text/javascript"> 
//<![CDATA[ 
    var footnote = new footNotes(); 
    footnote.format('article1','artnotes1'); 
    var footnote2 = new footNotes(); 
    footnote2.footNoteClassName = "footnote2"; 
    footnote2.footNoteTagName = "em"; 
    footnote2.footNoteBackLink = " [back &laquo;]"; 
    footnote2.format('article2','artnotes2'); 
//]]> 
</script> 
</div> 
<!--************************************* 實(shí)例代碼結(jié)束 *************************************--> 
    </div> 
    <div id="back"><a href="/pub/html/javascript/tip/footnotes_with_javascript_and_css/">返回 『用 Javascript 和 CSS 實(shí)現(xiàn)腳注（Footnote）效果』</a></div> 
</div> 
<br /> 
<div class="ad"> 
    </div> 
</body> 
</html>