- ベストアンサー
JavaScript*テーブルごとにデータを用意して、クリックで表示を切り替える方法
宜しくお願いします。 JavaScriptはほとんど初心者です。 タイトルがかなりわかりずらいと思いますが… こちらのサイトで使われているJavaScriptについての質問です。 http://miel-osaka-wedding.jp/bridalfair/bridalfair.html こちらのブライダルフェアの表示方法は、 左側の日にちをクリックしたら、右側に表示される情報が切り替わる、という表示方法です。 HTMLデータ上では、現在表示されている情報の他にもズラっと表示されています。それが、日にちをクリックすることにより、定位置にそれぞれの情報が表示されるようになっています。 それぞれの情報は、テーブルで区切られています。 そこで、ページをDLしてソースを見て研究したのですが、どうしても分からない箇所があります。 それは、フェア情報の右に配置されている4つのアイコン（マウスオーバーで画像が変わるものです）を削除すると、このJavaScriptが機能しなくなってしまいます。 ページを見ているうちに、「マウスオーバーで切り替わる画像」がJavaScripに影響しているように思ったのですが、 どう連動しているのか、なぜ機能しなくなるのかが分かりません。 （HTMLファイルとは別に、「js」という拡張子のファイルもありました。） もし、分かる方がいらっしゃいましたら教えていただけませんか？ もしくは、これと同じ表示方法について説明をされているサイトなどありましたら教えて頂けると嬉しいです。 ちなみに、使用しているソフトはDreamWeaverMXです。 至らない点があるかとはおもいますが、どうぞ宜しくお願いします。
- OmarieO
- お礼率100% (8/8)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
日付をクリックすることで表示される内容を切り替える処理は、<head>内の <script language="JavaScript" src="../browser2.js"></script> で定義されています。 このJavaScriptファイルが無いと当然動作しません。 具体的には以下のfunctionです。 function on(id){ var num = id.substr(4,1); for(i=1;i<10;i++){ document.getElementById("plan" + i).style.display = "none"; } document.getElementById("plan" + num).style.display = "block"; } 実質displayプロパティの値を変更することで表示/非表示を切り替えています。 各々のテーブル要素は、<div id="planX">～</div>でソース内に定義されています。 ご質問の「右の画像リンクを削除すると機能しなくなる」は、ソース上からは見受けられません。ごく普通のリンクです。 仮にリンクを削除したとして、動作しなくなると考えられるケースとしては、 １．テーブルのタグの対応が壊れている。（文法エラー） ２．<div></div>の対応が壊れている。（文法エラー） ３．必要なJavaScript functionが定義されていない。 が、咄嗟に考えつく原因です。 確認手順として、 １．ソースをDLする。 ２．http://miel-osaka-wedding.jp/browser2.jsをDLする。 ３．ソースのヘッダの<script language="JavaScript" src="../browser2.js"></script>を自身の環境に合わせて修正する。 これで正常に動作したら、 ４．不要なリンクを削除する。 で大丈夫だと思います。ただ、このサイトのソースを参考にする場合、インデントが若干ずれていますので、一度ソース全体を綺麗にする方が、修正する際には安全かと。
その他の回答 (2)
- mr_kjapan
- ベストアンサー率63% (29/46)
こんな感じかな？ <html> <head> <title>???????</title> <script language="JavaScript"> <!-- function on(ab){ for(i=1;i<=9;i++) { document.all("text"+i).style.display = "none"; document.all("text"+ab.charAt(4)).style.display = "block"; } } function dsp(){ document.all("text1").style.display = "none"; document.all("text2").style.display = "none"; document.all("text3").style.display = "none"; document.all("text4").style.display = "block"; //あらかじめ表示させておく要素 document.all("text5").style.display = "none"; document.all("text6").style.display = "none"; document.all("text7").style.display = "none"; document.all("text8").style.display = "none"; document.all("text9").style.display = "none"; } //--> </script> </head> <body onload="dsp();"> ・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・ <a href="#" onClick="on('text1')">あああ</a> <a href="#" onClick="on('text2')">いいい</a> <a href="#" onClick="on('text3')">ううう</a> <a href="#" onClick="on('text4')">えええ</a> <a href="#" onClick="on('text5')">おおお</a> <a href="#" onClick="on('text6')">かかか</a> <a href="#" onClick="on('text7')">ききき</a> <a href="#" onClick="on('text8')">くくく</a> <a href="#" onClick="on('text9')">けけけ</a> ・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ <div id="text1"> <table width="450" height="200" border="0" cellpadding="0" cellspacing="0"> ・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・ </table> </div> <div id="text2"> <table width="450" height="200" border="0" cellpadding="0" cellspacing="0"> ・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・ </table> </div> ・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・ <div id="text9"> <table width="450" height="200" border="0" cellpadding="0" cellspacing="0"> ・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・ </table> </div> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ </body> </html>
お礼
わざわざソースを書いて下さってありがとうございます。 これから研究しようと思います＾＾ JavaScriptを別ファイルにして呼び出すよりも、HTMLに埋め込む方が楽そうですね～。 JavaScript、いろいろできて奥が深いですね…。 どうもありがとうございました！
HTMLソースを見ましたが、おそらくスタイルのdisplay要素を使って隠してるだけだと思います。 折りたたみメニューでよく使われる手法です。 DreamWeaverは使ったことがないので分かりません。すいません。 同じようなサンプルは探すことができませんでした。本当にすいません。
お礼
いえいえ、ご回答ありがとうございます＾＾ 折りたたみメニューですか～。 使おうとして、少しいじってみたことがあるのでそちらの方向でも考えてみます！ メルパルクさんの見せ方は、まさに「これだ！！」という方法だったので見つけた時は嬉しかったのですが 実際見てみたら私には難しかったです。。
お礼
ご回答ありがとうございます。 右部分の画像ですが、DreamWeaver上でテーブルごと指示して一気に削除すると機能しなくなっていたのですが、タグで画像とテーブルを一つ一つ削除すると何故かちゃんと機能しました。。 なんとか、無事動きそうです！ ずっとDreamWeaverに頼りっぱなしだったのでタグも勉強しなくてはな…と思いました。 本当に丁寧にありがとうございました！そしてお騒がせしました。