[jQuery] 目次を自動生成

サンプル

はじめに

（内容）（内容）（内容）（内容）（内容）（内容）（内容）

第1章

起

（内容）（内容）（内容）（内容）（内容）（内容）（内容）

第2章

承

（内容）（内容）（内容）（内容）（内容）（内容）（内容）

承承

（内容）（内容）（内容）（内容）（内容）（内容）（内容）

第3章

転

転転

（内容）（内容）（内容）（内容）（内容）（内容）（内容）

転転転

TENTENTEN

てん

（内容）（内容）（内容）（内容）（内容）（内容）（内容）

てんてん

（内容）（内容）（内容）（内容）（内容）（内容）（内容）

てんてんてん

（内容）（内容）（内容）（内容）（内容）（内容）（内容）

第4章

結

（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）

結結

（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）（内容）

↑サンプルおわり

CSSとJavaScript部分のHTML

<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script src="extoc_1_0.js"></script>
<script type="text/javascript">
jQuery(function($){
        var toc = $('h2').exTOC({
                headFrom : 3,
                headTo : 6,
                insertMethod : 'after',
                numberingHead : true,
                numberingFrom : 2,
                numberingTo : 4
        });
        toc.getTOC().before('<div id="TOC"><b>目次（↓この部分が自動で生成されます）</b></div>')    
        $('h3').append('<a href="#TOC" class="return_mokuji">▲目次へ</a>');
});
</script>

この場合、<h3>～<h6>タグの部分が目次として自動生成され、<h4>～<h6>の部分に目次にナンバリングが入ります。

どんどん変更が追加されるような「FAQ」などで利用する場合に便利そうです。

この記事の1行目に飛ぶ

2011.02.15　液晶テレビ（32インチ以上）

2011年