![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
Q&Aのページを作ろうと思っています。
画面構成なのですが
Q1 ###
Q2 ###
Q3 ###
Q4 ###
という感じで質問一覧があり、
各項目をクリックすると
Q1 ###
A1 ******* ←この部分が挿入された感じ
*****
Q2 ###
Q3 ###
Q4 ###
というふうに、Qの間にAのテキストが表示されるようにしたいのです。
この場合、私の考えた方法だと
各項目をクリックした場合に
Q1.htmlから A1.htmlに飛ばして表示が切り替わったように見せようと思ったのですが
これだと質問が増えていくとすべてのファイルを書き換えて追加しなくてはいけませんよね?
何かうまいやり方はないものでしょうか?
よろしくお願いします。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_16.png?5a7ff87)
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>
ありがとうございます。大変参考になりました。
この場合はテキストだけの処理になってしまいますか?
出来れば、画像とテキストが一緒に処理できるといいのですが。
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";
}
}
}
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
なるほど、やってみましたらうまく行きました!どうもありがとうございます。
ついでにお聞きできればと思うのですが、
この方法でQ2をクリックした場合にA1の方を閉じるなんて事は可能ですかねぇ?
あと、display属性ってネットスケープ非対応なのでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) 【EXCEL】=セル&セルが上手く表示できない。 7 2022/09/04 21:32
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Excel(エクセル) Excelで数式をそのままコピーしたい どうすればいいですか? 4 2022/09/16 02:16
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- ドメイン・サーバー・クラウドサービス 自作サイトをサーバーにアップロードしたのですが… 2 2022/11/08 18:12
- その他(OS) Mac OSの操作について 2 2022/06/08 09:19
- その他(セキュリティ) 特定のWEBページのフリーズ AMAZONサイト PC側? ネットワーク? サイトに問題? 1 2023/01/30 16:23
- C言語・C++・C# visual studio 2019 についての質問です 1 2022/09/21 09:58
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ページによって表示位置がずれ...
-
bodyにidをつける理由は何ですか?
-
ページの読み込みが完了してか...
-
ボタンが押されたらWebページの...
-
ページを読み込み直さずに、sel...
-
上下にイメージをリピートさせたい
-
ページ自動ジャンプをリセット...
-
(Javascript)印刷するファイル...
-
formタグって必要ですか?
-
<a href="#" …>の意味を教えて...
-
UAによるリダイレクト
-
外部読み込みで動かないときの...
-
Cookieの回数で閲覧制限、javas...
-
他のページ更新
-
フレーム分割領域のサイズを変...
-
色の指定で配列を使いたい
-
DOMで生成したタグにCSSが適用...
-
セレクトメニューでリンクの際...
-
小ウインドウのスクロールバー
-
javascriptでalertの文字列をコ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
bodyにwidth:100%をつける理由は?
-
WEB上で編集できない、スク...
-
ワンクリックで二箇所に表示さ...
-
横スクロールを右から左へ・・・
-
スクロールバーのスクロール量...
-
bodyタグの範囲について
-
テキストをクリックすると答え...
-
"mailtoでメールの【氏名】【性...
-
「overflow: hidden」ペー ジ内...
-
ページの読み込みが完了してか...
-
DOCTYPE宣言をするとstyleが適...
-
外部ページからハッシュタグ(...
-
mailtoで質問・・・
-
divで作成したテキストボックス...
-
javaScript Nullまたはオブジェ...
-
ボタンが押されたらWebページの...
おすすめ情報