用Javascript 和 CSS 實現腳注（Footnote）效果
2024-05-06 14:14:05
供稿：網友
不過，既然腳注有這些好處，我們當然要在網頁中也加以利用，本文向您介紹了用 Javascript 和 CSS 實現腳注效果的方法。
代碼如下:
<script type="text/javascript">
// 說明：用 Javascript 和 CSS 實現腳注（Footnote）效果
var footNotes = function(){};
footNotes.prototype = {
footNoteClassName : "footnote", // 腳注的 className
footNoteTagName : "span", // 腳注的標簽名
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)
{
// 獲取腳注內容
elContent = spans[i].innerHTML;
noteArr.push(elContent);
// 創建一個指向腳注的鏈接
var newEle = document.createElement( "a" );
newEle.href = '#ftn_' + footnoteID + '_' + note;
newEle.title = "show footnote";
newEle.id = 'ftnlink_'+footnoteID+'_' + note;
newEle.innerHTML = note;
// 清空原有內容
while (spans[i].childNodes.length)
{
spans[i].removeChild( spans[i].firstChild );
}
spans[i].appendChild( newEle );
}
}
// 創建注釋列表
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];
// 創建【返回】鏈接
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="article1">
CSS <span class="footnote">CSS 是 Cascading Style Sheet 的縮寫。譯作「層疊樣式表單」。是用于(增強)控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。</span>
</div>
<div id="artnotes1" class="footnoteHolder"></div>
其中：
article1 是你需要腳注的文章主體
<span class="footnote"> .. </span> 是注釋內容，標簽 span 和 class 均可配置。
artnotes1 是顯示腳注的地方
按照默認的設置調用方式：
代碼如下:
<script type="text/javascript">
var footnote = new footNotes();
footnote.format('article1','artnotes1');
