http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/dhtml_126.html エクスプローラーツリー(2) - DHTML 上記の内容でエクスプローラーツリーを参考にして作成しているのですが、階層をもっと下まで(あと3くらい)まで、したいのですがどうしたらいいのでしょうか。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2003/08/04 19:29:31
  • 終了:--

回答(3件)

id:sasada No.1

sasada回答回数1482ベストアンサー獲得回数1332003/08/04 19:53:23

ポイント20pt

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/dhtml_126.html

エクスプローラーツリー(2) - DHTML

 単純に、

<DIV ID=”displayA” STYLE=”display:none”>

<DIV ID=”displayB” STYLE=”display:none”>

<DIV ID=”displayC” STYLE=”display:none”>

<!-- コンテンツ -->

</DIV>

</DIV>

</DIV>

とDIVのネスティングを深くしていけばよいと思います。

 その際、<DIV ID=”*****” ・・・>の”*****”が、ひとつのHTMLページの中で重ならないように、違う名前にするのが肝心です。

 当然、

<A HREF=”JavaScript:onClick=Display(’*****’);ImageChange(’img4’);”>

の”*****”は、DIVのIDと同じ物にしないとうまくいきません。

id:inokuni No.2

いのくに回答回数1343ベストアンサー獲得回数212003/08/04 20:07:17

ポイント20pt

http://www.hatena.ne.jp/1059992971#

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/dhtml_126.html エクスプローラーツリー(2) - DHTML 上記の内容でエクスプローラーツリーを参考にして作成しているのです.. - 人力検索はてな

<HTML>

<HEAD>

<META HTTP-EQUIV=”Content-Script-Type” CONTENT=”text/javascript”>

<TITLE>エクスプローラーツリー</TITLE>

<SCRIPT TYPE=”text/javascript”>

<!--

//画像のファイル名を指定して下さい

//(閉まっているフォルダが、folder1.gif・開いているフォルダが、folder2.gifとなります。

imagefile = new Array(”

”, ”

”);

image = new Array(imagefile.length);

for(count = 0; count < (imagefile.length - 1); count++){

image[count] = new Image();

image[count].src = imagefile[count];

}

function ImageChange(id){

if(window.document.images[id].src.indexOf(imagefile[0]) != -1){

window.document.images[id].src = imagefile[1];

}else{

window.document.images[id].src = imagefile[0];

}

}

function Display(id){

if(document.all){

if(document.all(id).style.display == ”block”){

document.all(id).style.display = ”none”;

}else if(document.all(id).style.display == ”none”){

document.all(id).style.display = ”block”;

}

}else if(document.getElementById){

if(document.getElementById(id).style.display == ”block”){

document.getElementById(id).style.display = ”none”;

}else if(document.getElementById(id).style.display == ”none”){

document.getElementById(id).style.display = ”block”;

}

}

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<A HREF=”JavaScript:onClick=Display(’display1’);ImageChange(’img1’);”>

<IMG SRC=”

” ID=”img1” BORDER=”0”>1 ACCESS R</A>

<DIV ID=”display1” STYLE=”display:none”>

 <A HREF=”JavaScript:onClick=Display(’display2’);ImageChange(’img2’);”><IMG SRC=”

” ID=”img2” BORDER=”0”>2 メニュー</A>

<DIV ID=”display2” STYLE=”display:none”>

  <A HREF=”JavaScript:onClick=Display(’display3’);ImageChange(’img3’);”><IMG SRC=”

” ID=”img3” BORDER=”0”>3 BBS</A>

<DIV ID=”display3” STYLE=”display:none”>

   <A HREF=”JavaScript:onClick=Display(’display4’);ImageChange(’img4’);”><IMG SRC=”

” ID=”img4” BORDER=”0”>4 CGI配布コーナー</A>

<DIV ID=”display4” STYLE=”display:none”>

    <A HREF=”JavaScript:onClick=Display(’display5’);ImageChange(’img5’);”><IMG SRC=”

” ID=”img5” BORDER=”0”>5 CGI配布コーナー</A>

<DIV ID=”display5” STYLE=”display:none”>

     <A HREF=”JavaScript:onClick=Display(’display6’);ImageChange(’img6’);”><IMG SRC=”

” ID=”img6” BORDER=”0”>6 CGI配布コーナー</A>

<DIV ID=”display6” STYLE=”display:none”>

      <A HREF=”

”>7 CGI配布コーナー</A>

      <A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_mov.html

Web Safe Color Checker(Mouse Over Version) - JavaScript

”>7 Web Safe Color Checker(Mouse Over Version)</A>

      <A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_cv.html

Web Safe Color Checker(Click Version) - JavaScript

”>7 Web Safe Color Checker(Click Version)</A>

</DIV>

     <A HREF=”

”>6 CGI配布コーナー</A>

     <A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_mov.html

Web Safe Color Checker(Mouse Over Version) - JavaScript

”>6 Web Safe Color Checker(Mouse Over Version)</A>

     <A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_cv.html

Web Safe Color Checker(Click Version) - JavaScript

”>6 Web Safe Color Checker(Click Version)</A>

</DIV>

    <A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_mov.html

Web Safe Color Checker(Mouse Over Version) - JavaScript

”>5 Web Safe Color Checker(Mouse Over Version)</A>

    <A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_cv.html

Web Safe Color Checker(Click Version) - JavaScript

”>5 Web Safe Color Checker(Click Version)</A>

</DIV>

   <A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_mov.html

Web Safe Color Checker(Mouse Over Version) - JavaScript

”>4 Web Safe Color Checker(Mouse Over Version)</A>

   <A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_cv.html

Web Safe Color Checker(Click Version) - JavaScript

”>4 Web Safe Color Checker(Click Version)</A>

</DIV>

  <A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_mov.html

Web Safe Color Checker(Mouse Over Version) - JavaScript

”>3 Web Safe Color Checker(Mouse Over Version)</A>

  <A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_cv.html

Web Safe Color Checker(Click Version) - JavaScript

”>3 Web Safe Color Checker(Click Version)</A>

</DIV>

 <A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_mov.html

Web Safe Color Checker(Mouse Over Version) - JavaScript

”>2 Web Safe Color Checker(Mouse Over Version)</A>

 <A HREF=”

http://www5e.biglobe.ne.jp/~access_r/hp/javascript/wscc_cv.html

Web Safe Color Checker(Click Version) - JavaScript

”>2 Web Safe Color Checker(Click Version)</A>

</DIV>

</BODY>

</HTML>

これでどうでしょう?

id:sasada No.3

sasada回答回数1482ベストアンサー獲得回数1332003/08/04 20:27:17

ポイント20pt

http://www.hatena.ne.jp/1059992971?

http://www5e.biglobe.ne.jp/~access_r/hp/dhtml/dhtml_126.html エクスプローラーツリー(2) - DHTML 上記の内容でエクスプローラーツリーを参考にして作成しているのです.. - 人力検索はてな

先ほどの書き方では、分かりにくかったと思いますので、例を挙げておきます。

エクスプローラツリーのHTMLの<BODY>から</BOODY>を下記のものと入れ替えてみてください。

動作と仕組みの関係がわかると思います。

====================================

<BODY>

<A HREF=”JavaScript:onClick=Display(’LEVEL0’);ImageChange(’img1’);”> <!-- LEVEL0 ON/OFF -->

<IMG SRC=”folder1.gif” ID=”img1” BORDER=”0”> ACCESS R</A>

<DIV ID=”LEVEL0” STYLE=”display:none”> <!-- LEVEL0 の ブロック -->

 <A HREF=”JavaScript:onClick=Display(’LEVEL1’);ImageChange(’img2’);”> <!-- LEVEL1 ON/OFF -->

<IMG SRC=”folder1.gif” ID=”img2” BORDER=”0”> メニュー (LEVEL1)</A>

<DIV ID=”LEVEL1” STYLE=”display:none”> <!-- LEVEL1 の ブロック -->

 <A HREF=”JavaScript:onClick=Display(’LEVEL2’);ImageChange(’img2’);”> <!-- LEVEL2 ON/OFF -->

<IMG SRC=”folder1.gif” ID=”img2” BORDER=”0”> メニュー (LEVEL2)</A>

<DIV ID=”LEVEL2” STYLE=”display:none”> <!-- LEVEL2 の ブロック -->

  <A HREF=”

”>BBS</A>

  <A HREF=”

”>検索エンジン集</A>

  <A HREF=”

”>HP作成リンク集</A>

</DIV>

</DIV>

</DIV>

</BODY>

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません