- ベストアンサー
ワンクリックで二箇所に表示させる方法
- AのリンクをクリックしてBとCに異なるページを表示する方法を教えてください。
- AのリンクをクリックするとBにサブメニューが表示され、同時にCにはサブメニューに関する説明が表示される方法を教えてください。
- Bに表示されたサブメニューをクリックするとCに次々に表示される方法を教えてください。
- hitsujiko_t
- お礼率25% (1/4)
- HTML
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
> 別ページを作る」と仰ってらっしゃる方法 #2さんの回答の方法のことです。 > Bはフレームではなくてただの<td>なのですが Bのセルの中にもCと同じようにiframeを置いてフレームを書き換える、という手段を提案されています。 以下は前回のサンプルを少し変更したものです。 前回のものよりはご希望に近いとは思いますが、カスタマイズするにはそれなりの知識が要るという点ではかわっていません。 <html> <head> <title>Menu</title> <script type="text/javascript"> <!-- function MenuChange(Mno) { var AllTag = document.getElementById('CellB').getElementsByTagName('*'); for(var i=0;i<AllTag.length;i++) { if(AllTag[i].className.match(/^Menu(.+)/)) AllTag[i].style.display = (RegExp.$1 == Mno)?'block':'none'; } AllTag = document.getElementById('CellC').getElementsByTagName('*'); var Iframe; var Flag = 0; for(var i=0;i<AllTag.length;i++) { if(AllTag[i].className.match(/^Menu(.+)/)) { if(RegExp.$1 == Mno) { AllTag[i].style.display = 'block'; Flag = true; } else { AllTag[i].style.display = 'none'; } } else if(AllTag[i].tagName.match(/iframe/i)) { Iframe = AllTag[i]; } } Iframe.style.display = (Flag)?'none':'block'; } function SubMenuClick() { var AllTag = document.getElementById('CellC').getElementsByTagName('*'); for(var i=0;i<AllTag.length;i++) { if(AllTag[i].className.match(/^Menu(.+)/)) { AllTag[i].style.display = 'none'; } else if(AllTag[i].tagName.match(/iframe/i)) { AllTag[i].style.display = 'block'; } } } //--> </script> </head> <body> <table border width=700> <tr> <td rowspan="2" width=100 valign="top"> <a href="http://www.google.co.jp/" target="iframe" onclick="MenuChange(1);">google</a><br> <a href="#" onclick="MenuChange(2);return false;">goo</a><br> <a href="http://www.yahoo.co.jp/" target="iframe" onclick="MenuChange(3);">yahoo</a> </td> <td id="CellB"> <div class="Menu1" style="display:none;"> メニュー１です。 </div> <div class="Menu2" style="display:none;"> <a href="http://www.goo.ne.jp/" target="iframe" onclick="SubMenuClick()">goo</a> <a href="http://oshiete.goo.ne.jp/" target="iframe" onclick="SubMenuClick()">教えて!goo</a> </div> <div class="Menu3" style="display:none;"> メニュー３です。 </div> </td> </tr> <tr> <td id="CellC" height="400" valign="top"> <iframe name="iframe" style="display:none;" height="400" width="590"></iframe> <div class="Menu2" style="display:none;"> <h2>goo</h2> <p>gooって何? gooでは、サーチ・コンテンツ・コミュニティ・ショッピング・ビジネス・リサーチなどの総合的なWebサービスを提供しています。</p> <p>教えて!gooとは? 知りたい事を質問して回答して貰えるサービスです。</p> </div> </td> </tr></table> </body> </html>
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
Javascript部分がちょっと増えますが セルBの内容やセルCに表示するメニューの説明を別ページにしないバージョンのサンプルを作ってみました。 （内容量によっては、素直に別ページに作った方がよさそうですが、内容量が少ない場合に。） <html> <head> <title>Menu</title> <script type="text/javascript"> <!-- function MenuChange(Mno) { var AllTag = document.getElementById('CellB').getElementsByTagName('*'); for(var i=0;i<AllTag.length;i++) { if(AllTag[i].className.match(/^Menu(.+)/)) AllTag[i].style.display = (RegExp.$1 == Mno)?'block':'none'; } AllTag = document.getElementById('CellC').getElementsByTagName('*'); for(var i=0;i<AllTag.length;i++) { if(AllTag[i].className.match(/^Menu(.+)/)) { AllTag[i].style.display = (RegExp.$1 == Mno)?'block':'none'; } else if(AllTag[i].tagName.match(/iframe/i)) { AllTag[i].style.display = (Mno == 0)?'block':'none'; } } } function SubMenuClick() { var AllTag = document.getElementById('CellC').getElementsByTagName('*'); for(var i=0;i<AllTag.length;i++) { if(AllTag[i].className.match(/^Menu(.+)/)) { AllTag[i].style.display = 'none'; } else if(AllTag[i].tagName.match(/iframe/i)) { AllTag[i].style.display = 'block'; } } } //--> </script> </head> <body> <table border> <tr> <td rowspan="2"> <a href="#" onclick="MenuChange(1);return false;">メニュー１</a><br> <a href="#" onclick="MenuChange(2);return false;">メニュー２</a><br> <a href="ｘｘｘ.html" target="iframe" onclick="MenuChange(0)">メニュー０</a> </td> <td id="CellB"> <div class="Menu1"> <a href="ａａａ.html" target="iframe" onclick="SubMenuClick()">サブメニュー１-a</a> <a href="ｂｂｂ.html" target="iframe" onclick="SubMenuClick()">サブメニュー１-b</a> </div> <div class="Menu2" style="display:none;"> <a href="ｃｃｃ.html" target="iframe" onclick="SubMenuClick()">サブメニュー２-c</a> <a href="ｄｄｄ.html" target="iframe" onclick="SubMenuClick()">サブメニュー２-d</a> </div> <div class="Menu0" style="display:none;"> サブメニューなし。 </div> </td> </tr> <tr> <td id="CellC"> <iframe name="iframe" src="" style="display:none;"></iframe> <div class="Menu1"> メニュー１の説明文<br> メニュー１の説明文 </div> <div class="Menu2" style="display:none;"> メニュー２の説明文<br> メニュー２の説明文<br> メニュー２の説明文 </div> </td> </tr></table> </body> </html>
補足
御礼遅くなりまして申し訳御座いません。 首記の方法を試させて頂きましたがどうしても上手くいきません。 上手くいかない内容。 1.セルBにサブメニューを表示させるのは1つのメインメニューリンクからだけで良いのに、リンクを未選択の状態からサブメニューが出てしまう。 2.上記の内容を取り敢えず無視。サブメニューを表示させたいメインメニューからのリンクをクリックすると、iframeに何も表示されない。但しサブメニューは表示され、それをクリックするとiframeにはサブメニューの内容が表示される。 です。 どうも内容的に初心者の手には余るようで…。 もしお手すきでしたら「別ページを作る」と仰ってらっしゃる方法をご教授頂けませんでしょうか。 宜しくお願い致します。
- msi21st
- ベストアンサー率66% (2/3)
kokorone様のご意見に補足させて頂く形になります。 ２つのフレームのページを同時に変更する、 簡単なサンプルを載せさせて頂きました。 ＿／＿／＿／＿／＿／＿／＿／＿／＿／＿／ <script> function sample(){ Ｂのフレーム名.location.href="アドレス"; Ｃのフレーム名.location.href="アドレス"; } </script> <a href="#" onClick="sample()"> ＿／＿／＿／＿／＿／＿／＿／＿／＿／＿／ の様にAタグ内の「onClick」イベントでsampleと言うファンクションが実行されます。 複数の処理を行う際に便利です。 【Ｂのフレーム名】【Ｃのフレーム名】と言う所は各フレーム名に変更して下さい。 ＞Bに表示されたサブメニューをクリックするとCに次々表示される はＢ内で <a href="アドレス" target="Ｃのフレーム名"> で可能です。 ですので、ＢＣ共に名前を付けておく必要が有ります。 「onMouseover」はリンクにカーソルを乗せた時、 「onClick」はリンクをクリックした時に呼び出されますので、 かぶる事はありません。 長々と書かせて頂きましたが、マトに合った解答で御座いませんでしたらすみません。
補足
ご教授有難う御座います。 なのに、JavaScriptに関しても全く初心者以上の初心者で、申し訳ない事に記載されている内容が理解出来ませんでした…。 Bはフレームではなくてただの<td>なのですが、それでもこの方法は有効なのでしょうか？ また、現在別ページを呼び出すフレームではなく、インラインフレームを使用しているのですがその場合でも有効なのでしょうか。
- kokorone
- ベストアンサー率38% (417/1093)
ＪａｖａＳｃｒｉｐｔで解決します。 まずは、考え方だけ説明します。 １）ＡのリンクのＯｎＣｌｉｃｋイベントで、 Ｂのセル内容の変更と、ＣのＩＦＲＡＭＥ のＵＲＬを変更します。 ２）ＢのリンクのＯｎＣｌｉｃｋイベントで、 ＣのＩＦＲＡＭＥのＵＲＬを変更します。 詳細は、明日にでも。。 サンプルが見つかれば、お知らせします。
補足
有難う御座います。 あの…一つ問題なのですが、実は書き漏れで（Javaを使うのですか…！）Aのセルの中でOnMouseoverイベントを使ってしまっています。 （同じセル内に <A onmouseover="menu.innerText='**です。'" onmouseout="menu.innerText=''" href="../**/index.htm" target="iframe">***</A><BR> <FONT id=menu color=black size="1"></FONT> のような形です（OnClickイベントとは異なるかも知れませんが…）。 kokorone様の仰るJavaのOnClickイベントとは被らないでしょうか？
お礼
何度もお手を煩わせてしまい、申し訳御座いませんでした。 折角素晴らしい回答を頂戴したのに、使いこなせず（まだまだ勉強が必要です…）この度は申し訳御座いませんが、諦め→スキルアップしてから再挑戦、という形にさせて頂きます。 本当に本当に有難う御座いました！ サンプルはもう、何も云う事無く素晴らしく、思う通りの動作なのですが…どうにも知識不足が否めません。 本当に有難う御座いました！