- ベストアンサー
ajax を使って，ｈｔｍｌを読み込み表示する方法
webページのfaqを作成しています。 目次が並んでいて，どれかひとつ質問をクリックすると，その下に回答が表示されるという仕組みにしようと考えています。 それについては以下のようにプログラムしてみました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div class="demo-show"> <h3>質問1</h3> <div>"answer1.html"を読み込んで表示</div> <h3>質問２</h3> <div>"answer2.html"を読み込んで表示</div> <h3>質問３</h3> <div>"answer3.html"を読み込んで表示</div> </div> </body> これにhtmlファイルを読み込む機能を持たせるために，<script>に一番下の3行を追加しました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); $("div.a-1").load("./answer1.html"); ←追加 $("div.a-2").load("./answer2.html"); ←追加 $("div.a-3").load("./answer3.html"); ←追加 }); }); </script> <body>は <div class="demo-show"> <h3>質問1</h3> <div. class="a-1"></div> <h3>質問２</h3> <div.class="a-2"></div> <h3>質問３</h3> <div.class="a-3"></div> </div> これを実行すると，文字の場所がずれて表示されてしまいます。 （今回の作業は既に出来上がっているページに機能を追加しているので，おそらくタグが干渉しあっているのだろうと思います。これは，細かく確認すれば直るとは思います） その他，細々と不具合があります。 また，質問の数は５０以上あります。 この方法以外に良い方法がありましたら教えていただけると助かります。 よろしくお願いします。
- km340
- お礼率78% (11/14)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
検証作業のために借りてるスペースにサンプルを置きました。 Ajax関連はにわか仕込みですが、使えそうならどうぞ。 サンプルページ http://library.nukimi.com/sample/ajax/ajaxsample.html 解説ページ http://library.nukimi.com/sample/ajax/ajax.test.3.html
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問文をざっと読んだだけで、確認はしていませんが… ＞$("div.a-1").load("./answer1.html"); ←追加 ＞$("div.a-2").load("./answer2.html"); ←追加 ＞$("div.a-3").load("./answer3.html"); ←追加 って最初に一度実行すればよいので、clickの処理の中に入れる必要はないでしょう。しかも表示した後に読込んでるし、その時の表示に関係ない部分も毎回読込むことになっている。 （セレクタはdiv.a-1なのかdiv .a-1なのか、両方ともOKなのか？ ←jqueryよく知らないので未確認) HTMLの ＞<div. class="a-1"></div> ＞<div.class="a-2"></div> ＞<div.class="a-3"></div> はタイポなのでしょうか、本当にこういうソースなのでしょうか？ ＞質問の数は５０以上あります 数が多いので効率よくというのであれば、個別のclass名を設定するようなことはしないで、「質問」+「回答」の組合わせが複数個あるという構成に対応できるように考えるべきではないでしょうか？ また、あとから回答を読込むということが条件ならば、読込む時にdiv要素も生成して追加していくようにするという方法もありそう。 （元のソースは質問だけ並んでいる形）
お礼
ありがとうございます。 初めの読み込みのタイミングは，おっしゃる通りです。 直すことにしました。 二つ目のHTMLはタイポです・・・お恥ずかしいです。 いろいろな構成がありそうなのですが，私の知識と能力がついていかず・・・苦労しています。
- yambejp
- ベストアンサー率51% (3827/7415)
無理せずにframe系の処理をしたらどうですか？ frame自体非推奨とはいえ、frame非対応のブラウザはjavascriptだって まともに動かないケースがおおいですから
お礼
そうですね。 javascriptもいろいろ問題ありのようですが，今回はjavascriptを使って作ってみようということになっているんです。 アドバイスをありがとうございました。
お礼
ありがとうございます。 サンプルを参考にさせていただき，いろいろ試してみようと思います。