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

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

不過，既然腳註有這些好處，我們當然要在網頁中也加以利用，本文向您介紹了用 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');
</script>

如果你想自訂一些內容，可以用下面的方式：複製代碼代碼如下:<script type="text/javascript">
var footnote = new footNotes();
footnote.footNoteClassName = "footnote2";
footnote.footNoteTagName = "em";
footnote.footNoteBackLink = " [back «]";
footnote.format('article1','artnotes1');
</script>

測試代碼：將下面的代碼儲存運行。複製代碼代碼如下:<!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）是向使用者提供更多資訊的一個最佳途徑，也是主體資訊的一個有效補充，常見於各種印刷書籍中。不過，既然腳註有這些好處，我們當然要在網頁中也加以利用，本文向您介紹了用 Javascript 和 CSS 實現腳註效果的方法。" />
<title>用 Javascript 和 CSS 實現腳註（Footnote）效果 - 注釋, css, Javascript, footnote, 腳註, </title>
</head>
<body>
<div class="ad">
</div>
<br />
<div id="example">
<h3 id="example_title">用 Javascript 和 CSS 實現腳註（Footnote）效果</h3>
<div id="example_main">

<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">
// 說明：用 Javascript 和 CSS 實現腳註（Footnote）效果
// 作者：CodeBit.cn ( http://www.CodeBit.cn )
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="wrapper">
<div id="content">
<div id="article1">

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

</div>

<h2>Article 2</h2>
<p>在編程的過程中，我們通常都會積累很多簡單、有效並且可重用的小段代碼，一個簡單的字串處理函數<em class="footnote2">函數是將唯一的輸出值賦予每一輸入的『法則』(Wikipedia)。</em>或者一個驗證郵件地址的Regex<em class="footnote2">Regex(Regular Expression)描述了一種字串匹配的模式，可以用來檢查一個串是否含有某種子串、將匹配的子串做替換或者從某個串中取出符合某個條件的子串等。</em>，又或者一個簡單的檔案上傳類，甚至一個效果不錯的CSS<em class="footnote2">CSS 是 Cascading Style Sheet 的縮寫。譯作「層疊樣式表單」。是用於(增強)控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。 </em>導航樣式。這些小技巧為我們節省了不少時間，但是時間一長，代碼數量越來越多，尋找起來也耗費了不少時間。因此，本站致力於收集整理一些類似的小知識，並且努力提高文章搜尋品質，一來方便大家查閱，二來也算是支援一下開源事業。
</p>
<p>本站收集的代碼和教程中，有從世界著名開源軟體中摘取的函數、類<em class="footnote2">類是對某個對象的定義。它包含有關對象動作方式的資訊，包括它的名稱、方法、屬性和事件。</em>，也有網友提交的原創或翻譯的精彩文章。本站的收錄代碼的標準是：簡單、精彩、通用。
</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 «]";
footnote2.format('article2','artnotes2');
//]]>
</script>
</div>

</div>
<div id="back"><a href="/pub/html/javascript/tip/footnotes_with_javascript_and_css/">返回『用 Javascript 和 CSS 實現腳註（Footnote）效果』</a></div>
</div>
<br />
<div class="ad">
</div>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More