이 작업도 수행하려면 내 getElementByTagNames() 함수도 필요합니다.
와 같은 HTML 태그가 포함되어 있으며 이러한 태그가 ToC에도 표시되기를 원합니다. ToC 내부의 에 이러한 새 링크를 추가했습니다.
코드 복사 코드는 다음과 같습니다.
for (var i=0 ;i< toBeTOCced.length;i ) {
var tmp = document.createElement('a')
tmp.innerHTML = toBeTOCced[i].innerHTML = '페이지';
z.appendChild(tmp);
제목이 h4 또는 h5인 경우 클래스를 추가합니다.
코드 복사 코드는 다음과 같습니다. if (toBeTOCced[i].nodeName = = 'H4')
tmp.className = 'indent';
if (toBeTOCced[i].nodeName == 'H5')
tmp.className = 'extraindent';
이제 a 요소를 실제 제목에 연결해야 합니다. 이를 위해서는 고유 ID가 필요합니다. 그러나 이러한 헤더에는 이미 ID가 포함되어 있을 수 있습니다. 원래의 내부 연결을 깨고 싶지 않기 때문에 제목의 원래 ID를 사용하는 것을 선호합니다. 타이틀에 ID가 없는 경우에만 새 ID를 만듭니다.
코드 복사 코드는 다음과 같습니다. var headerId = toBeTOCced[i].id || link' i ; 방금 만든 링크의 href 속성은 #headerId여야 하며 제목 자체에도 ID가 있습니다.
코드 복사 코드는 다음과 같습니다. tmp.href = '#' headerId; toBeTOCced[i].id = headerId;
특수한 경우: 헤더가 페이지 상단인 H2인 경우에도 ID를 받게 됩니다.
코드 복사 코드는 다음과 같습니다. if (toBeTOCced[i].nodeName = = 'H2') { tmp.innerHTML = 'Top'; tmp.href = '#top'
toBeTOCced[i].id = 'top'
}
}
이제 양식이 생성되었으므로 이를 호출한 위치로 되돌립니다.
코드 복사 코드는 다음과 같습니다.return y;} ToC 표시 및 숨기기 마지막 기능은 ToC 표시 및 숨기기에 사용됩니다. 매우 간단합니다. 먼저 ToC의 상태를 감지한 다음 정보를 기반으로 새로운 텍스트와 표시 값을 생성합니다.
코드 복사 코드는 다음과 같습니다. var TOCstate = 'none'; >function showhideTOC () { TOCstate = (TOCstate == 'none') ? 'block' : 'none'; var newText = (TOCstate == 'none') ? '페이지 내용 표시' 페이지 내용 숨기기 ';
document.getElementById('contentheader').innerHTML = newText;
document.getElementById('innertoc').lastChild.style.display =
}
이 함수는 사용자가 을 클릭하면 ToC 표시를 전환할 수 있도록 호출됩니다. 또한 사용자가 링크를 클릭하면 ToC가 즉시 숨겨집니다.
번역 주소: http://www.quirksmode.org/dom/toc.html
재인쇄를 위해 다음 정보를 보관해 주세요. 저자: Beiyu(tw:@rehawk)