忍者ブログ

2018
10
17

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/10/17 (Wed.)

2011
03
24

topicPath - HTMLに追加する要素を作成

前回の「目次データから上位のトピックを探す。」では、目次データからトピックパスに表示するデータを取得する方法を説明しました。 そこでは、次のようなオブジェクトを要素とする配列が得られました。

[
 {id:'content22',     title:'内容22',parent:'subcontents2'},
 {id:'subcontents2',  title:'目次2',parent:'home'},
 {id:'home', title:'目次',parent:'contents'}
]

title 属性の値をリンクテキストとし、id 属性の値をリンク先にすれば、ページ内リンクが作成できます。

順番を逆にしないと、パスになりません。 まず、これをやりましょう。

上の配列を"paths"という変数で参照することにしましょう。 配列ですので、reverse() メソッドで順番が反転します。

paths.reverse();
上位から下位へと並ぶ順番に変わりました。
[
 {id:'home', title:'目次',parent:'contents'},
 {id:'subcontents2',  title:'目次2',parent:'home'},
 {id:'content22',     title:'内容22',parent:'subcontents2'}
]

この順番で、A 要素を生成します。

 for(var i=0;i

'topicPath'という id 要素を持つ要素内に、順番にハイパーリンクが追加されます。

また、このハイパーリンクがクリックされた時は、"changePage" という関数が起動されると記述されています。

この"changePage" という関数は、クリック後に表示すべき要素を取得するための関数です。A 要素の href 属性の値から、id を取得して、表示すべき要素を特定します。次のソースでは、表示すべき要素を グローバル変数 content で参照させます。

function changePage(e){
  content=document.getElementById(
   this.href.match(/#(.+)/)[1]
  );
}
PR

2011/03/24 (Thu.) Trackback(0) Comment(0) JavaScript

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

09 2018/10 11
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア