WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:ツリー状のコンテンツ

0:[投稿] あっぷる [2002/11/26 19:32 ][環境:WIN+IE わからない]

A,B,CとコンテンツがあってAをクリックすると
1,2,3と出てきてBをクリックすると
4,5,6と出てくるツリー状のコンテンツを
作ってみたいのですが、作り方が分かりません。
どなたかアドバイスお願いいたします。


1:[回答] 薫 [2002/11/26 19:50 ]

これはどうでしょう?

A03 リンククリックでリンクを出す
http://www.fureai.or.jp/~tato/DHTML/new/contents.htm


2:[質問] あっぷる [2002/11/26 19:50 ]

書き忘れました。
メニューでAをクリックすると1,2,3が出てきて
1の上にカーソルをあてると
その説明が出るようにしたいのです。

どうぞ宜しくお願いします。


3:[回答] - [2002/11/26 20:50 ]

MSIE5以上, Netscape6以上, Opera7 以上対応ならDOMで簡単に出来る。
Netscape4.x と Opera6 は、DOMが真面に実装されていないので対応は面倒。

例えば、こんな感じで出来る。
ただし、スクリプト利用不可の場合の配慮が別途必要。

<head>
 <title>ツリー状のコンテンツ</title>
 <style>
 <!--
 ul.hide { display: none; }
 ul.show { display: block; }
 -->
 </style>
 <script type="text/javascript">
 <!--
 function show_hide(_obj)
 {
   childUL = _obj.parentNode.getElementsByTagName("UL")[0];
   childUL.className = (childUL.className == "hide" ? "show" : "hide");
 }
 //-->
 </script>
</head>

<body>

<ul>
 <li><a href="javascript:void(0)" onclick="show_hide(this)">A</a>
   <ul class="hide">
     <li title="説明1"><a href="javascript:void(0)" onclick="show_hide(this)">1</a>
       <ul class="hide">
         <li title="説明1.1">1.1</li>
         <li title="説明1.2">1.2</li>
       </ul>
     </li>
     <li title="説明2">2</li>
     <li title="説明3">3</li>
   </ul>
 </li>
 <li><a href="javascript:void(0)" onclick="show_hide(this)">B</a>
   <ul class="hide">
     <li title="説明4">4</li>
     <li title="説明5">5</li>
     <li title="説明6">6</li>
   </ul>
 </li>
 <li><a href="javascript:void(0)" onclick="show_hide(this)">C</a>
   <ul class="hide">
     <li title="説明7">7</li>
     <li title="説明8">8</li>
     <li title="説明9">9</li>
   </ul>
 </li>
</ul>

</body>

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World