(cache) エクスプローラーツリー(1)

ホーム > DHTML > エクスプローラーツリー(1)

■説明

　エクスプローラーのツリーのようにリンクバーをクリックすると隠れていた項目が見えるようになります。これを使う事によってページがすっきりさせることやページのリンクをツリーのように管理できます。IE4から動作します。N6からも動作します。一応クロスブラウザー(IE/Nに対応しているという意味)となっています。DHTMLの機能です。動的なページを作ることが出来ます。

■ソース

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>エクスプローラーツリー(1)</TITLE>
<SCRIPT TYPE="text/javascript">
<!--
//――――――――――――――――――――――――――――――――――――――
// 作成者:るび～  ACCESS R  http://www5e.biglobe.ne.jp/~access_r/
//――――――――――――――――――――――――――――――――――――――
function Display(id){
	if(document.all || document.getElementById){	//IE4,N6以降
		if(document.all){
			obj = document.all(id).style;
		}else if(document.getElementById){
			obj = document.getElementById(id).style;
		}

if(obj.display == "block"){
			obj.display = "none";		//未表示にする
		}else if(obj.display == "none"){
			obj.display = "block";		//表示にする
		}
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<A HREF="JavaScript:onClick=Display('display2');">Aについて</A><BR>
	<DIV ID="display2" STYLE="display:none">
	　　A-1について<BR>
	　　A-2について<BR>
	　　A-3について<BR>
	</DIV>

<A HREF="JavaScript:onClick=Display('display3');">Bについて</A><BR>
	<DIV ID="display3" STYLE="display:none">
	　　B-1について<BR>
	　　B-2について<BR>
	　　B-3について<BR>
	</DIV>

<A HREF="JavaScript:onClick=Display('display4');">Cについて</A><BR>
	<DIV ID="display4" STYLE="display:none">
	　　C-1について<BR>
	　　C-2について<BR>
	　　C-3について<BR>
	</DIV>
</DIV>

</BODY>
</HTML>

■ソースの説明

JavaScriptを外部ファイルも設置出来るようにしました。設定する際には<HEAD>～</HEAD>内に以下の分を記述して下さい。尚、ここからダウンロード（dhtml_110.js）して下さい。設定を変える際には、ダウンロードしたdhtml_110.jsファイルを直接修正して下さい。
下記の作成例を示します。
　メニューを追加する場合は、以下の赤い部分を変えてください。
　・赤い部分が表示をクリックするたびに出したり隠したりする関数を呼ぶ際に必要とするものです。対応するために同じ値として下さい。
　・･･･部分がメニュー部分となります。ここには入れたいコメントやリンクを挿入して下さい。

　<A HREF="JavaScript:onClick=Display('display5');">
<DIV ID="display5" STYLE="display:none">
　　･･･<BR>
　　･･･<BR>
　　･･･<BR>
</DIV>

　<A HREF="JavaScript:onClick=Display('display6');">
<DIV ID="display6" STYLE="display:none">
　　･･･<BR>
　　･･･<BR>
　　･･･<BR>
</DIV>
使用しているものは、「document.all」と「document.getElementById」の2つ使用することによって両ブラウザに対応しています。対応していないブラウザに関しては何も表示しないようになっています。

■実行例

メニュー

■対応ブラウザ

エクスプローラーツリー(1)
IE3	IE4	IE5	IE5.5	IE6	N3	N4	N6	N7	O6
×	●	●	●	●	×	×	●	●	×

[ホーム] [DHTML] [↑ページ最上部へ戻る]

簡単に1クリックで宣伝広告!!
個人が全ての検索エンジンやメルマガ等に登録していくのは、非常に大変な労力となっています。しかし、簡単に検索エンジン、リンク集、掲示板、メルマガの全てに1クリックでPRが出来てしまいます。