topicPath - HTMLに追加する要素を作成　寝太郎の江戸風呂。ね！

2024
11
23

[PR]

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

2024/11/23 (Sat.)

2011
03
24

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

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

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

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

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

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

paths.reverse();

上位から下位へと並ぶ順番に変わりました。

[
 {id:'home', title:'目次',parent:'contents'},
 {id:'subcontents2',  title:'目次２',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()
																		Comment(0)
												JavaScript