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

解決済

質問者：pochitarou
質問日時：2005/07/22 13:48
回答数：3件

Ｑ＆Ａのページを作ろうと思っています。
画面構成なのですが

Ｑ１　＃＃＃
Ｑ２　＃＃＃
Ｑ３　＃＃＃
Ｑ４　＃＃＃

という感じで質問一覧があり、

各項目をクリックすると

Ｑ１　＃＃＃
Ａ１　＊＊＊＊＊＊＊　←この部分が挿入された感じ
　　　＊＊＊＊＊
Ｑ２　＃＃＃
Ｑ３　＃＃＃
Ｑ４　＃＃＃

というふうに、Ｑの間にＡのテキストが表示されるようにしたいのです。

この場合、私の考えた方法だと
各項目をクリックした場合に
Q1.htmlから　A1.htmlに飛ばして表示が切り替わったように見せようと思ったのですが
これだと質問が増えていくとすべてのファイルを書き換えて追加しなくてはいけませんよね？

何かうまいやり方はないものでしょうか？
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： kamineco
回答日時：2005/07/22 22:43

#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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。大変参考になりました。

この場合はテキストだけの処理になってしまいますか？
出来れば、画像とテキストが一緒に処理できるといいのですが。

通報する

お礼日時：2005/07/27 15:22

No.3

回答者： partita
回答日時：2005/07/23 10:24

#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";
　　　}
　　}
}

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2005/08/02 13:32

No.1

回答者： y_an
回答日時：2005/07/22 14:52

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