用 Javascript 和 CSS 實現腳註（Footnote）效果

 腳註（Footnote）是向用戶提供更多信息的一個最佳途徑，也是主體信息的一個有效補充，常見於各種印刷書籍中。不過，既然腳註有這些好處，我們當然要在網頁中也加以利用，本文向您介紹了用 Javascript 和 CSS 實現腳註效果的方法。

1.  
2. <script type="text/javascript">
3.  
4. // 說明：用 Javascript 和 CSS 實現腳註（Footnote）效果
5. // 作者：CodeBit.cn ( http://www.CodeBit.cn )
6.  
7. var footNotes = function(){};
8.  
9. footNotes.prototype = {
10.  
11.     footNoteClassName : "footnote",    // 腳註的 className
12.     footNoteTagName : "span",    // 腳註的標籤名
13.     footNoteBackLink : " [back]",    // 返回鏈接
14.  
15.     format : function(contentID, footnoteID)
16.     {
17.         if (!document.getElementById) return false;
18.  
19.         var content = document.getElementById(contentID);
20.         var footnote = document.getElementById(footnoteID);
21.  
22.         var spans = content.getElementsByTagName(this.footNoteTagName);
23.  
24.         var noteArr = [];
25.         var note = 0;
26.         
27.         var elContent;
28.  
29.         var len = spans.length;
30.         for (i=0; i<len; i++)
31.         {
32.             note ++;
33.  
34.             if (spans[i].className == this.footNoteClassName)
35.             {
36.                 // 獲取腳註內容
37.                 elContent = spans[i].innerHTML;
38.  
39.                 noteArr.push(elContent);
40.  
41.                 // 創建一個指向腳註的鏈接
42.                 var newEle = document.createElement( "a" );
43.                 newEle.href = '#ftn_' + footnoteID + '_' + note;
44.                 newEle.title = "show footnote";
45.                 newEle.id = 'ftnlink_'+footnoteID+'_' + note;
46.                 
47.                 newEle.innerHTML = note;
48.                 
49.                 // 清空原有內容
50.                 while (spans[i].childNodes.length)
51.                 {
52.                     spans[i].removeChild( spans[i].firstChild );
53.                 }
54.                 
55.                 spans[i].appendChild( newEle );
56.             }
57.         }
58.  
59.         // 創建註釋列表
60.         var ul = this.__buildNoteList(noteArr, footnoteID);
61.  
62.         footnote.appendChild(ul);
63.  
64.     },
65.  
66.     __buildNoteList : function(notes, noteID) 
67.     {
68.         if(!notes || notes.length < 1) return;
69.         
70.         var ul = document.createElement('ul');
71.  
72.         ul.className = this.footNoteClassName;
73.  
74.         var li;
75.  
76.         var len = notes.length + 1;
77.         for(i=1; i<len; i++)
78.         {
79.             li = document.createElement('li');
80.             li.id = "ftn_"+noteID+"_"+i;
81.  
82.             li.innerHTML = notes[i-1];
83.  
84.             // 創建【返回】鏈接
85.             var link = document.createElement("a");
86.             link.href = "#ftnlink_" + noteID + "_" + i;
87.  
88.             link.innerHTML = this.footNoteBackLink;
89.  
90.             li.appendChild( link );
91.  
92.             ul.appendChild( li );
93.         }
94.  
95.         return ul;
96.     }
97. };
98.  
99. </script>
100.  

要實現腳註，我們需要下列元素：

1.  
2. <div id="article1">
3.  
4. CSS <span class="footnote">CSS 是 Cascading Style Sheet 的縮寫。譯作「層疊樣式表單」。是用於(增強)控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。</span>
5.  
6. </div>
7.     
8. <div id="artnotes1" class="footnoteHolder"></div>
9.  

其中：
article1 是你需要腳註的文章主體
<span class="footnote"> .. </span> 是註釋內容，標籤 span 和 class 均可配置。
artnotes1 是顯示腳註的地方


按照默認的設置調用方式：
Javascript:

1.  
2. <script type="text/javascript">
3.  
4. var footnote = new footNotes();
5. footnote.format('article1','artnotes1');
6.  
7. </script>
8.  

如果你想自定義一些內容，可以用下面的方式：
Javascript:

1.  
2. <script type="text/javascript">
3.  
4. var footnote = new footNotes();
5. footnote.footNoteClassName = "footnote2";
6. footnote.footNoteTagName = "em";
7. footnote.footNoteBackLink = " [back &laquo;]";
8. footnote.format('article1','artnotes1');
9.  
10. </script>
11.