Q&Aのページを作ろうと思っています。
画面構成なのですが
Q1 ###
Q2 ###
Q3 ###
Q4 ###
という感じで質問一覧があり、
各項目をクリックすると
Q1 ###
A1 ******* ←この部分が挿入された感じ
*****
Q2 ###
Q3 ###
Q4 ###
というふうに、Qの間にAのテキストが表示されるようにしたいのです。
この場合、私の考えた方法だと
各項目をクリックした場合に
Q1.htmlから A1.htmlに飛ばして表示が切り替わったように見せようと思ったのですが
これだと質問が増えていくとすべてのファイルを書き換えて追加しなくてはいけませんよね?
何かうまいやり方はないものでしょうか?
よろしくお願いします。
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をつける理由は何ですか?
-
googleモバイルがiframeで表示...
-
テキストボックス内にハイパー...
-
ボタンが押されたらWebページの...
-
-css- ページオープン時やリロ...
-
(Javascript)印刷するファイル...
-
スクロールバーのスクロール量...
-
別ページのページ内リンクでの...
-
bodyタグの範囲について
-
<a href="#" …>の意味を教えて...
-
javascriptでalertの文字列をコ...
-
リンク移動先のURLを取得
-
別ファイルのfunctionの読み込み方
-
スマホ上で、左右スワイプで次...
-
インラインフレームで表示され...
-
jqueryでのkeydownイベント発生...
-
二つの関数を一つにまとめるこ...
-
ひとつの外部ファイルに複数の...
-
外部jsファイルの変数に代入す...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
テキストボックス内にハイパー...
-
ボタンが押されたらWebページの...
-
横スクロールを右から左へ・・・
-
WEB上で編集できない、スク...
-
別ページのページ内リンクでの...
-
"mailtoでメールの【氏名】【性...
-
googleモバイルがiframeで表示...
-
bodyにwidth:100%をつける理由は?
-
複数のiframeの読み込みについて
-
インラインフレームの縦幅を、...
-
【HTML】フレームの中央寄せに...
-
WSHでのIE制御について
-
インラインフレーム内のスクロ...
-
「overflow: hidden」ペー ジ内...
-
ページによって表示位置がずれ...
-
DOCTYPEの指定より異なる動き
-
外部ページからハッシュタグ(...
おすすめ情報