Js และ CSS ตระหนักถึงเอฟเฟกต์เชิงอรรถ

 
 
<ประเภทสคริปต์ = "ข้อความ/จาวาสคริปต์" >
 
 
 
// คำอธิบาย: ใช้ Javascript และ CSS เพื่อให้ได้เอฟเฟกต์เชิงอรรถ
 
// ผู้แต่ง: CodeBit.cn ( http://www.CodeBit.cn )
 
 
 
var footNotes = ฟังก์ชัน ( ) { } ;
 
 
 
เชิงอรรถ ต้นแบบ = {
 
 
 
footNoteClassName : "footnote" , // className ของเชิงอรรถ
 
footNoteTagName : "span" , // ชื่อแท็กของเชิงอรรถ
 
footNoteBackLink : " [back]" , // กลับไปที่ลิงก์
 
 
 
รูปแบบ : function ( contentID, footnoteID )
 
{
 
if ( ! document.getElementById ) return false ;
 
 
 
var content = document.getElementById ( contentID ) ;
 
var เชิงอรรถ = document.getElementById ( เชิงอรรถ ) ;
 
 
 
var spans = content.getElementsByTagName ( นี่ . footNoteTagName ) ;
 
 
 
var noteArr = [ ] ;
 
var elContent
 
;
 
 
 
var len = spans.for
 
( i = 0 ; i<len; i++ )
 
{
 
หมายเหตุ ++;
 
 
 
if ( spans [ i ] . className == this . footNoteClassName )
 
{
 
// รับเนื้อหาเชิงอรรถ
 
elContent = spans [ i ] innerHTML ;
 
 
 
noteArr.push ( elContent ) ;
 
 
 
// สร้าง
 
ลิงก์ไปยังเชิงอรรถ
 
var newEle . ( "
 
a
 
" ) ;
 
'ftnlink_' +footnoteID+ '_' + note;
 
newEle. innerHTML = note;
 
// ล้างเนื้อหาต้นฉบับ
 
ในขณะที่ ( spans [ i ] . childNodes . length )
 
{
 
spans [ i ] . RemoveChild ( spans [ i ] . firstChild ) ;
 
}
 ช่วง 
[
 
i ] . ผนวกเด็ก ( newEle )
 
}
 
 
 
//สร้างรายการบันทึกย่อ
 
var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
 
 
 
เชิงอรรถ.appendChild ( ul ) ;
 
 
 
} ,
 
 
 
__buildNoteList : function ( บันทึกย่อ, noteID )
 
{
 
if ( !notes || notes.length < 1 ) return ;
 
var ul = document .
 
 
 
ul.className = นี่ .footNoteClassName ;
 
 
 
วาร์ลี ;
 
 
 
var len = note.length + 1 ;
 
สำหรับ ( i= 1 ; i<len; i++ )
 
{
 
li = document.createElement
 
( ' li' ) ;
 
 
 
li.innerHTML = บันทึกย่อ [ i -1 ] ;
 
 
 
// สร้างลิงก์ [return]
 
var link = document.createElement ( " a
 
" ) ;
 
 
 
link.innerHTML = นี่ . footNoteBackLink ;
 
 
 
li.appendChild ( ลิงค์ ) ;
 
 
 
ul.appendChild
 
( li ) ;
 
 
 
กลับ ul;
 
}
 
} ;
 
 
 
</สคริปต์>
 
 

 
 
<div id = "article1" >
 
 
 
CSS <span class = "footnote" > CSS เป็นตัวย่อของ Cascading Style Sheet แปลว่า "Cascading Style Sheets" เป็นภาษามาร์กอัปที่ใช้สำหรับควบคุม (ปรับปรุง) สไตล์หน้าเว็บ และอนุญาตให้แยกข้อมูลสไตล์ออกจากเนื้อหาหน้าเว็บ </span>
 
 
 
</div>
 
<div id = "artnotes1" class = "footnoteHolder" > </div>
 
 

 
 
<ประเภทสคริปต์ = "ข้อความ/จาวาสคริปต์" >
 
 
 var 
เชิงอรรถ = รูป แบบ เชิงอรรถ
 
ใหม่ ( ) ;
 
 
 
</สคริปต์>

 


หากคุณต้องการปรับแต่งเนื้อหาบางส่วน คุณสามารถใช้วิธีการต่อไปนี้:
 จาวาสคริปต์:

 
 
<ประเภทสคริปต์ = "ข้อความ/จาวาสคริปต์" >
 
 
 
เชิงอรรถ = เชิงอรรถ ใหม่
 
( )
 
;​
​​
​​​​​
 
 
</สคริปต์>