概要




h2タグを拾って目次を自動作成するJavascriptコードを載せています。 特定のid要素内のh2タグだけを拾うこともできます。 目次の位置も自由に決められます。







h2タグを拾って目次を作るJavaScriptコード




タイトルの通り、特定の範囲内のh2タグを拾って目次を作成するJavascriptコードを載せています。 デモページのような目次を作成できます。 textというid(id名は自由に変更可能)の要素内にある、h2タグを広い、自動で目次を作ってくれます。 使い方ですが、htmlソース内に、 ・このページの下にあるJavascrptコード ・link_boxという名前のidを入れたhtml要素(ここに目次が置かれる) ・textという名前のidを入れたhtml要素(この中のh2を拾う) を入れてください。 注意点として、scriptは、link_boxやtextの後に置いてください。 また、link_box要素内は空にしておいてください。 ↓↓↓以下コードです コードは***変更***とコメントアウトされている部分を、必要に応じて変更して使って下さい。


<script>

//***変更***目次を作りたいh2タグを含むid名を入れる
var box = "text"

var urltext = location.href;
contents = document.getElementById(box);
var list = contents.querySelectorAll('h2');

//h2タグがあることを確認
if(list.length > 0){

//目次の作成
//link_box要素がnull確認
if(document.getElementById('link_box') != null){
    for (var i = 0; i < list.length; i++) {
        list[i].id = 'content' + String(i);
    };
    var liststr='';
    for (var i = 0; i < list.length; i++) {
        blank = '・';
        liststr = liststr + blank + '<a href="#content' + String(i) + '">' + list[i].textContent + '</a><br><br>';
    };
document.getElementById('link_box').innerHTML = '<h2>目次</h2><hr class="table"><br><p>' + liststr + '</p>';
};

}
</script>
↑↑↑コードここまで










関連ページと広告