見出しタグ<h2>,<h3>
などから目次を生成し、ページ内にリンクを張りたいと考えています。
JS等で自動で生成するにはどうしたらいいでしょうか?
1 件の回答
jSで実装した場合には下記のような形になります。
$(function(){// H2~H4タグから目次を自動生成
var idcount = 1;
var toc = '';
var currentlevel = 0;
$("h2,h3,h4:header", $("#article")).each(function(){
this.id = "chapter-" + idcount;
idcount++;
var tag = this.nodeName.toLowerCase();
var level = 0;
if( tag == "h2") {
level = 1;
}else if( tag == "h3") {
level = 2;
} else if( tag == "h4") {
level = 3;
}
while(currentlevel < level) {
toc += '<ol class="chapter">';
currentlevel++;
}
while(currentlevel > level) {
toc += "<\/ol>";
currentlevel--;
}
toc += '<li><a href="#' + this.id + '">' + $(this).html() + "<\/a><\/li>\n";
});
while(currentlevel > 0) {
toc += "<\/ol>";
currentlevel--;
}
$("#index").html(toc);
});