jQuery で記事の中にある h2 要素を抜き出して、自動的に目次を生成するコードを試してみました。
基本的に、サイト内の目次を jQuery で自動で作成するチュートリアル を参考にさせて頂きました。 ありがとうございます。
設置方法 ———————————————————————-
head 要素内に次の記述を追加します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
次のコードを、どうにかして読み込ませます。
// 自動的に目次を生成する
tocdata = “”;
tocdata = “<dl><dt>この記事の目次</dt><dd><ul>“;
$(“div#extended h2”).each(function(i) {
var current = $(this);
current.attr(“id”, “title” + i);
tocdata += “<li><a href="#title" + i + "">” + current.html() + “</a></li>“;
});
tocdata += “</ul></dd></dl>“;
// div#extended 内の最初の h2 要素の前に追加
$(“div#extended h2:first”).before(tocdata);
参考にさせてもらったページ ———————————————————————-
目次自動生成の jQuery プラグインもあるみたいです。
– 目次の自動生成を行う jQuery.exTOC.js – Cyokodog :: Diary – jQuery版:タブパネルと目次作成 – JavaScriptで目次を自動作成 – SHIGETA BLOG – ページの目次を自動で作成するjavascript「jqTOC」|skuare.net
ありがとうございます。