JSとCSSで脚注効果を実現

 
 
<script type= "text/javascript" >
 
 
 
// 説明: Javascript と CSS を使用して脚注効果を実現します
// 著者: CodeBit.cn ( http://www.CodeBit.cn )
 
 
 
var footNotes = function ( ) { } ;
 
 
脚注。プロトタイプ= {
 
 
 
footNoteClassName : "footnote" , // 脚注のクラス名
footNoteTagName : "span" , // 脚注のタグ名
footNoteBackLink : " [back]" , // リンクに戻る
 
形式: 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 len = スパンの長さ;
 
for ( i= 0 ; i<len; i++ )
 
{
 
note ++;
 
 
 
if ( spans [ i ] .className == this .footNoteClassName )
 
{
 
// 脚注の内容を取得します
。 elContent = spans [ i ] .
 
 
 
noteArr.push ( elContent ) ;
 
 
 
// 脚注へのリンクを作成します
var newEle = document.newEle.href =
 
' #ftn_' + footnoteID + '_' + note =
 
"
 
show footnote" ;
 
'ftnlink_' +footnoteID+ '
 
_ ' + note ; innerHTML = note
 
;
 
//
元
のコンテンツをクリアします。
 
}
スパン
[ i ] 。​
​
 
 
 
//ノートリストを作成する
var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
 
 
脚注.appendChild ( ul ) ;
 
 
 
} 、
 
 
 
__buildNoteList : function ( notes, noteID )
 
{
 
if ( !notes || Notes.length < 1 ) return ;
 
var ul = document .
 
 
 
ul.className = this .footNoteClassName ;
 
 
ヴァーリ;
 
 
 
var len = メモの長さ+ 1 ;
 
for ( i= 1 ; i<len; i++ )
 
{
 
li =ドキュメントID
 
= "ftn_" +noteID+ "_" +i;
 
 
 
li. innerHTML = メモ[ i -1 ] ;
 
 
 
// [return] リンクを作成します
。 var link = document .
 
href = "#ftnlink_" + noteID + "_" + i;
 
 
リンク。 innerHTML = this 。
 
 
 
li.appendChild (リンク) ;
 
 
 
ul.appendChild ( li )
 
;
 
 
戻り値
}
 
} ;
 
 
 
</script>
 
 

 
 
<div id = "article1" >
 
 
 
CSS <span class = "footnote" > CSS は Cascading Style Sheet の略です。 「カスケード スタイル シート」と訳されます。これは、Web ページのスタイルの (拡張) 制御に使用されるマークアップ言語であり、Web ページのコンテンツからスタイル情報を分離できます。 </スパン>
 
 
 
</div>
 
<div id = "artnotes1"クラス= "footnoteHolder" > </div>
 
 

 
 
<script type= "text/javascript" >
 
 
 
var footnote =新しい脚注( ) ;
フォーマット( 'article1' , 'artnotes1' ) ;
 
 
 
</script>



一部のコンテンツをカスタマイズする場合は、次の方法を使用できます。
 JavaScript:

 
 
<script type= "text/javascript" >
 
 
 
; var footnote = new footnote
 
. footnoteTagName = "
 
footnoteBackLink =
 
" [back
 
& laquo ; ] ;
 
 
 
</script>