• ベストアンサー

テキストをクリックすると答えが表示されるページ。

Q&Aのページを作ろうと思っています。 画面構成なのですが Q1 ### Q2 ### Q3 ### Q4 ### という感じで質問一覧があり、 各項目をクリックすると Q1 ### A1 ******* ←この部分が挿入された感じ    ***** Q2 ### Q3 ### Q4 ### というふうに、Qの間にAのテキストが表示されるようにしたいのです。 この場合、私の考えた方法だと 各項目をクリックした場合に Q1.htmlから A1.htmlに飛ばして表示が切り替わったように見せようと思ったのですが これだと質問が増えていくとすべてのファイルを書き換えて追加しなくてはいけませんよね? 何かうまいやり方はないものでしょうか? よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • kamineco
  • ベストアンサー率25% (38/151)
回答No.2

#1の方と方法は違いますが、以下のようにすればどれかを押すと他はすべて閉じます。 ------------------------------------------------ <html> <head> <script language="JavaScript"> function show(ID) { document.getElementById("a1").innerText=""; document.getElementById("a2").innerText=""; document.getElementById("a3").innerText=""; document.getElementById("a4").innerText=""; switch(ID) { case "a1": document.getElementById(ID).innerText="A1"; break; case "a2": document.getElementById(ID).innerText="A2"; break; case "a3": document.getElementById(ID).innerText="A3"; break; case "a4": document.getElementById(ID).innerText="A4"; break; } } </script> </head> <body> <div id="q1" onClick='show("a1")'>Q1</div> <span id="a1"></span> <div id="q2" onClick='show("a2")'>Q2</div> <span id="a2"></span> <div id="q3" onClick='show("a3")'>Q3</div> <span id="a3"></span> <div id="q4" onClick='show("a4")'>Q4</div> <span id="a4"></span> </body> </html>

pochitarou
質問者

お礼

ありがとうございます。大変参考になりました。 この場合はテキストだけの処理になってしまいますか? 出来れば、画像とテキストが一緒に処理できるといいのですが。

すると、全ての回答が全文表示されます。

その他の回答 (2)

  • partita
  • ベストアンサー率29% (125/427)
回答No.3

#1様の改造版です。ネットスケープ対応(WIN)。 (MacIEでは動作しませんでした。) function ChangeObjectDisplay(targetObjName){ if(document.getElementById){ var oTarget = document.getElementById(targetObjName);      if (oTarget.style.display=="none"){      oTarget.style.display="";     } else{      oTarget.style.display="none";     }    } else if(document.all){ var oTarget = document.all(targetObjName);     if (oTarget.style.display=="none"){      oTarget.style.display="";     } else{      oTarget.style.display="none";     }    } }

pochitarou
質問者

お礼

お礼が遅くなり申し訳ありません。 どうもありがとうございます。

すると、全ての回答が全文表示されます。
  • y_an
  • ベストアンサー率57% (24/42)
回答No.1

JavaScriptを併用し、 Style属性のDisplayを切り替えればいけるでしょう。 ===以下サンプル============ <html> <head>  <script type="text/javascript">   function ChangeObjectDisplay(targetObjName){    var oTarget = document.all[targetObjName];    if (oTarget.style.display=="none"){     oTarget.style.display="";    }else{     oTarget.style.display="none";    }   }  </script> </head> <body>  <table>   <tr>    <td>Q1<td>    <td onclick="ChangeObjectDisplay('trA1');">XXXXXXXXX<td>   </tr>   <tr id="trA1" style="display:none;">    <td>A1<td>    <td>YYYYYYYYYYYYYY<td>   </tr>  </table> </body> </html>

参考URL:
http://www.tohoho-web.com/www.htm
pochitarou
質問者

お礼

なるほど、やってみましたらうまく行きました!どうもありがとうございます。 ついでにお聞きできればと思うのですが、 この方法でQ2をクリックした場合にA1の方を閉じるなんて事は可能ですかねぇ? あと、display属性ってネットスケープ非対応なのでしょうか。

すると、全ての回答が全文表示されます。

関連するQ&A