ページ内リンクを手動で作成するのは結構手間なんで 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のプラグインも漁ってみるか。
jQuery入門―魔法のJavaScriptリファレンス&サンプル
/ 金額 : ￥ 3,129
トラックバック
- http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/425
- [WEBプログラム覚書]2009年01月09日 13:37
- jQueryによる表示、非表示切り替え
- jQueryによるDiv要素の表示、非表示切り替え
- [WEBプログラム覚書]2009年01月20日 17:21
- 出来ると思ったけど出来なかったJavascriptコード
- 「innerText」はFirefoxで利用できないようなので、try～catchで分岐させようと思ったけどダメだったのでｊQueryのブラウザ判定を利用...
- [WEBプログラム覚書]2009年01月27日 22:15
- jQueryオブジェクト
- jQueryオブジェクトについていろいろ気になったので調べてみたらいろいろとわかっていい勉強になったよって話
- [WEBプログラム覚書]2010年01月19日 12:19
- [jQuery]こんな機能があったんだ。jQuery stop()
- jQuery stop()のいろいろな機能を試してみたよ
人気の記事
1-5
6-10
- 66.5459770115 秒: (174ビュー)
- WEBプログラム覚書::表示内容の切り替え(JavaScript)
- 55.5748792271 秒: (207ビュー)
- 情報備忘録::eclipse + PDT 2.0 + XAMPP で作るWordpress開発環境
- 55.1833910035 秒: (289ビュー)
- WEBプログラム覚書::jQueryによる表示、非表示切り替え
- 35.6666666667 秒: (183ビュー)
- WEBプログラム覚書::javascript フォーム関連オブジェクトの取得
- 30.6506849315 秒: (146ビュー)
- 情報備忘録::Photoshop チュートリアル 基本的な光の作り方
- 29.8631578947 秒: (190ビュー)
- WEBプログラム覚書::javascript 子要素取得のメモ
- 29.2393939394 秒: (330ビュー)
- WEBプログラム覚書::PHP 参照渡し(リファレンス)と値渡し
- 24.2450331126 秒: (302ビュー)
- 情報備忘録::Dreamweaverで文字コードを変換する手順
- 8.04268292683 秒: (164ビュー)
- WEBプログラム覚書::MySQLエラー「Column 'カラム名' in field list is ambiguous」
- 2.84523809524 秒: (168ビュー)
- WEBプログラム覚書::PHP Array関数いろいろ
WEBデザイン・ホームページ製作 カンテナ プログラミング覚書
ActionScript
ETC
Excel VBA
HTML/CSS
jQuery fade() と pngbehavior.htcJavaScript
[jQuery]こんな機能があったんだ。jQuery stop() [jQuery]ツールチップをいろいろと検討 Ajaxメモ jQueryのプラグイン作成前のメモ jQuery プラグイン Slide boxメモ jQuery fade() と pngbehavior.htc javascript Node プロパティ 優れたナビゲーションを真似てみる デザイナーのためのjQueryチュートリアル 最小？IEブラウザ判定 jQueryオブジェクト javascript 反転処理1 javascriptの.演算子と変数と引数 jQueryでページ内リンクを自動作成 jQueryによる表示、非表示切り替え 出来ると思ったけど出来なかったJavascriptコード 「新しくプログラミング言語を覚えたいときに行うべき10の練習問」をやってみた。-第3問- 「新しくプログラミング言語を覚えたいときに行うべき10の練習問」をやってみた。-第2問- 「新しくプログラミング言語を覚えたいときに行うべき10の練習問」をやってみた。-第1問- javascript 子要素取得のメモ javascript フォーム関連オブジェクトの取得 javascript エラーコード javascriptでのエラー処理 try-catch構文 HTMLエスケープを行うPHP関数、htmlspecialchars をJavascriptで実装 Divの高さを合わせるスクリプト(safari対応版) Simple Javascript Accordionsを試してみた Divの高さを合わせるスクリプト htmlにjavascripを記述する際の注意 JavaScript正規表現1 不特定多数の引数をもつ関数 JavaScriptでテーブルの行を交互に色分け[テーブル複数ある場合] JavaScriptでテーブルの行を交互に色分け 要素名(タグ名)で要素オブジェクトを取得 JavaScriptの配列の基本あれこれ ウィンドウサイズを取得 表示内容の切り替え(JavaScript) HTMLタグと内容を取得 数字の入力チェック ブラウザの情報を取得 スクリプト記述MySQL
PHP
[jQuery]ツールチップをいろいろと検討 javascript エラーコードXML
タグ
