jQueryでページ内リンクを自動作成
ページ内リンクを手動で作成するのは結構手間なんで jQueryを利用して自動で作成。
サンプルコード
#MainContents内の見出しh3に対してページ内リンクを作成する。
Javascript
- $(function(){
- /**
- * #MainContents内のh3に
- * 対してページ内リンクを作成する
- *
- */
- // a nameの接頭辞
- var prefix = 'inline';
- // liを格納
- var list = '';
- $('#MainContents h3').each(function(i){
- aname = prefix + i;
- $(this).before('<a name="' + aname + '"></a>');
- list += '<li><a href="#' + aname + '">' + $(this).text() + '</a></li>';
- });
- // #MainContentsの先頭に追加
- $('#MainContents').prepend('<ul>' + list + '</ul>');
- });
HTML
- <div id="MainContents">
- <h3>1.見出し１</h3>
- <p>
- 見出し1の内容がここに入ります。
- <br />
- <br />
- <br />
- </p>
- <h3>2.見出し2</h3>
- <p>
- 見出し2の内容がここに入ります。
- <br />
- <br />
- <br />
- </p>
- ・
- ・
- ・
- </div>
実行結果
1.見出し１
見出し1の内容がここに入ります。
2.見出し2
見出し2の内容がここに入ります。
3.見出し3
見出し3の内容がここに入ります。
4.見出し4
見出し4の内容がここに入ります。
5.見出し5
見出し5の内容がここに入ります。
もっと良いものがプラグインとかでありそ。 ぼちぼちjQueryのプラグインも漁ってみるか。
- Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
- 作者:西畑 一馬 | 価格:￥ 3,497
| 投稿日 | 2008年12月25日 12:18 |
|---|---|
| カテゴリ | JavaScript |
| タグ | jQuery | サンプルコード | フレームワーク | ライブラリ |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1152 |
トラックバック(4)
2009年1月20日 17:21
出来ると思ったけど出来なかったJavascriptコードWEBプログラム覚書
「innerText」はFirefoxで利用できないようなので、try～catchで分岐させようと思ったけどダメだったのでｊQueryのブラウザ判定を利用...続きを読む
コメント
カテゴリ
検索
Linuxを覚えると捗る
- 改訂 新Linux/UNIX入門
- 作者:林 晴比古 | 価格:￥ 3,990
- 入門bash 第3版
- 作者:Bill Rosenblatt | 価格:￥ 2,940
はじめてのCentOS5
- Vimテクニックバイブル ～作業効率をカイゼンする150の技
- 作者:Vimサポーターズ | 価格:￥ 3,129
- Linuxの教科書 改訂版 （マイコミムック） (MYCOMムック)
- 作者:小林 峰子 | 価格:￥ 1,890