jQueryで記事内の特定タグを取り出し、自動で目次を設定する方法 | 東京都世田谷区　ホームページ制作　[k]id

１、目次(index)の必要性

ブログで記事を書いているとどうしても長い記事に鳴ってしまう事があります。
そういう場合は読み手の事を考えて目次を設定するのが効果的かと思います。

しかし、その都度aタグ等でリンクを設定するのは骨の折れる作業ですので、
h3など指定したタグを元に自動で目次を指定できたら便利です。

今回はJQueryを利用し、上記のような自動目次を設定してみたいと思います。

２、jQueryの設置

下記をヘッダに記述しjQueryライブラリを読み込んてください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 

３、JavaScriptの記述

適当な箇所にJavaScriptを記述してください。

$(document).ready(function() {
var index_no = 1;
var mokuji_cont = '';
$(".cont_wrap h3",this).each(function(){
this.id = "no-" + index_no;
index_no++;
mokuji_cont += '<li><a href="#' + this.id + '">' + $(this).html() + "</a></li>";
});
if(mokuji_cont != ''){ 
$("#mokuji_cont").html("<ul>" + mokuji_cont + "</ul>");
}
});

 

４、呼び出し方

目次を表示したい箇所に下記を記述してください。

<div id="mokuji_cont"></div>