JavaScriptで目次を自動作成してしまおうと、考えた。
もちろん、PHPを使ったって良いんだけれど、PHPはローカルでは確認できないので….
あらかじめ、目次項目にしたいものを<h4>タグにしておく。
もちろん、<h3>だって何だっていいんだが、混ぜたらだめである。
もうひとつ、あらかじめ、目次を置きたい場所に
<span id=mokuji></span>
を置いておく。
それからもうひとつ、<body>タグのオプションに
onLoad = “ol();”
を入れておく。
<body bgcolor = “#ffffff” onLoad = “ol();”>
といった具合である。
あとは、内部でも外部でもいいから、JavaScriptで次の関数を置いておくだけである。
function ol () {
var mokujilist = document.getElementsByTagName('h4');
//目次の見栄えはご自由に↓
var out = '<div style = "border:#dbf 1px solid;">';
//項目が少ないときは目次を作らない
if (mokujilist.length < 2) {
return;
}
for (var i = 0; i < mokujilist.length; i++) {
var idname = "mokuji" + i;
//h4タグから取得した文字列から改行を削除して、各々の目次を作成する。見栄えはご自由に。
out = out + ((i) ? '- ' : '')
+ '<a href = "#' + idname + '">'
+ mokujilist[i].innerHTML.replace(/\n/g, '')
+ '</a> ';
//h4タグにidを付ける
mokujilist[i].setAttribute ("id", idname);
}
document.getElementById("mokuji").innerHTML = out + '</div>';
}
楽典.comで活用中。