前の記事 ≪:インスピレーションを刺激するデジタルアート等まとめ集
次の記事 ≫:小窓をアイコン化できるjQueryプラグイン「jQuery Iconize Plugin」

サイト内の目次をjQueryで自動で作成するチュートリアル

2009年08月24日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

Automatically generate table of contents using jQuery

サイト内の目次をjQueryで自動で作成するチュートリアル。
jQueryで、h1〜3タグのヘッドラインを自動で抽出し、以下のように「Table of Contents」としてヘッダに表示するチュートリアルです。
コンテンツが仮に変わったとしても、jQueryで自動でやってくれるため、目次作成がかなり作成が楽になりそうです。



デモページ

コードは以下のように、プラグインにするほどではない簡単なコードで実現できています。

$("#toc").append('<p>In this article:</p>') 
$("h1, h2, h3").each(function(i) { 
    var current = $(this); 
    current.attr("id", "title" + i); 
    $("#toc").append("<a id='link" + i + "' href='#title" + i + "' title='" + current.attr("tagName") + "'>" + current.html() + "</a>");
});

これは、とてもいいアイデアですね。

関連エントリ

関連の記事検索:JavaScript
スポンサード リンク

By.KJ : 2009年08月24日 09:04 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)