어떤 JavaScript 라이브러리 또는 프레임 워크가 "콘텐츠 테이블"세대를 지원합니까?
-
23-08-2019 - |
문제
나는 HTML (앵커 포함)에서 "목차"생성에서 JavaScript를 찾고 있습니다.
예시:
<h1>First level1 heading</h1>
lorem ipsum
<h2>1a heading</h2>
lorem ipsum
<h2>1b heading</h2>
lorem ipsum
<h1>Second level1 heading</h1>
lorem ipsum
같은 것을 반환해야합니다
First level1 heading
1a heading
1b heading
Second level1 heading
제목에 연결된 라인과 Orignal HTML도 삽입 된 앵커로 반환해야합니다.
큰 JavaScript 라이브러리 또는 프레임 워크 중 하나에 포함되어 있습니까?
그들 중 누구도 가지고 있지 않다면 누군가이 목적을 위해 좋은 JS 모듈을 본 적이 있습니까?
해결책
jQuery 이 플러그인을 사용하여 친구입니다. 목차. 홈페이지입니다 http://code.google.com/p/samaxesjs/
다른 팁
직접 만들어주세요. :), 도움이되기를 바랍니다.
신체 요소의 첫 번째 자식으로 DIV 요소를 추가하고 "TableOfContents"로 ID를 제공합니다.
아래의 스크립트를 신체 요소의 마지막 자식으로 추가하십시오.
<script>
var el = document.getElementsByTagName("*") || [];
var toc = "<ul>";
var lvl = 1;
for(var i=0;i<el.length;i++)
{
var ce = el[i];
var tag = ce.tagName + "";
var m = tag.match(/^h([1-5])$/i);
if(m)
{
var n = Number(m[1]);
if(lvl > n)
{
while(lvl-->n)toc+="</ul></li>";
}else if(lvl < n){
while(lvl++<n)toc+="<li style='list-style:none'><ul>";
}
toc += '<li><a href="#toc_' + i + '">' +
(ce.innerText || ce.text()) +
'</a></li>';
var ta = document.createElement("div");
ta.innerHTML = '<a name="toc_' + i + '" />';
ce.insertBefore(ta, ce.firstChild);
}
}
while(lvl-->1)toc+="</ul></li>";
toc+="</ul>";
document.getElementById("tableOfContents").
innerHTML = toc;
</script>
이 스크립트는 각 H (1 ~ 5)를 감지하고 목차를 생성합니다.
이것은 10-20 라인 기능으로 해결할 수있는 매우 간단한 문제입니다. 프레임 워크가 필요하지 않습니다. getElementsByTagName ( 'H1'), getElementsByTagName ( 'H2')으로 DOM을 걸거나 일반 표현식을 사용하십시오. 로드 프레임 워크에는 성능의 영향과 위험이 제공되므로 간단한 문제를 위해 설치하지 않는 것이 좋습니다.
제휴하지 않습니다 StackOverflow