Q&A集を作っているのですが、文字が必然的に多くなりますので、クエスチョンをずらっとならべて答えを普段見えない形にし(クエスチョンの一覧が一目でわかるようにし)、Qの部分をクリックすると下に隠れていた答えが現れるようにしたいと考えています。
説明下手ですが、作成法分かる方、よろしくお願いいたします。
※尚、どのような形かは分かりませんが、サーバーの都合上PHP等のプログラムをもちいらないといけないならあきらめたいと思います。(現サーバーで使用不可)
※このサイトの様な形式です
http://kaju.kir.jp/fufuko/chart1.php
No.2ベストアンサー
- 回答日時:
htmlでも可能です。
上記のサイトの関係の必要なソースを抜き出してみました。
<html>
<head>
<SCRIPT><!--
function sd(n){if(n.style.display=="none"){n.style.display="";}else{n.style.display="none"}return false;}
//---></SCRIPT>
</head>
<body>
<A class=sd onclick="sd(kaku1);return false;">ここの文字を押すと表示/非表示</a>
<DIV class=kaku id=kaku1 contentEditable=false style="DISPLAY: none">表示される文字</DIV>
</body>
</html>
という構造になっています。
使うだけというならこれで十分かと思います。
kaku1やkaku2は変数みたいなもので1セットごとに変えなければならないです。
以下参考URLのツリーのとこも参考になりますよ。
参考URL:http://www.nslabs.jp/javascript.rhtml
No.3
- 回答日時:
★1
<SCRIPT><!--
function sd(n){
if(n.style.display=="none"){
n.style.display="";
}else{
n.style.display="none"
}
return false;
}
//---></SCRIPT>
<p>『名も無き洞窟』</p>
<div class="boss">
<DIV>
★2
<A class=sd onclick="sd(kaku0);return false;"><h2>BOSS NAME:リトルデーモン</h2></a>
★3
<DIV class=kaku id=kaku0 contentEditable=false style="DISPLAY: none">
HP:2400 TP:100<h3>――Element Defense――</h3>
<div class="p"><br>火:100 風:100 闇:100 天: 60
<br>水:100 土:100 光:100 破:100
<br>
<br>弱点⇔耐性:天 [火水風土闇光破]
</div>
<h3>――Action――</h3>
<div class="p"><br>・ノーマルアタック
<br>・ハードアタック
<br>・ウイング
<br>
<br>まず最初に「ブライトネス」の全体で雑魚を倒した後に、
<br>HP残量に気を付けて「ヘイトレッドエッジ」を連発しましょう。
<br>
<br>魔法の攻撃対象選択時に上下キーを押せば、威力は落ちる代わりに
<br>全体効果を持ちます。無論、その限りでない物も在りますが。
</div>
</div>
初めに、上記URLのソースを一部引用させていただきました。
★1:JavaScript部分
★2:リンク定義
★3:リンクをクリックされると表示されるテキスト部分
[[解説]]
まず、★3ですが、<DIV>タグで、テキスト部分をブロック定義します。
style="DISPLAY: noneで以下の内容は、非表示になっています。
id=kaku0 でこのブロックの名前を定義します。
★2では、onclick(クリックイベントが発生したら、以下の処理を実行する)を
定義します。
onclick="sd(kaku0);return false;"
では、クリックしたら、★1を実行します。
sd(kaku0);
は、★3で定義した名前"kaku0"を★1に教えます。
return false;
では、クリックされた時の処理を中断します。
★1では、"kaku0"をnという名前にもらいます。
もらったnの表示状態が「非表示」(n.style.display=="none")ならば、
表示状態を「表示」(n.style.display="";)にします。
もらったnの表示状態が「表示」(n.style.display="";)ならば、
表示状態を「非表示」(n.style.display=="none")にします。
以上で、ご理解ください。
詳細な説明ありがとうございます。
初心者の私としては#2さんのシンプルな構造から理解していきたいと思いますが、当回答の詳しい説明も合わせて、今後の勉強にさせて頂きます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) Excelで漢字人名が勝手に並び変わる(続) 4 2023/03/21 21:28
- Outlook(アウトルック) PCで登録途中の画面から認証コードを確認する方法を教えてください。 3 2022/09/29 06:11
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- 美術・アート トレパク疑惑をかけられにくくするには ここ最近いわゆるトレパク警察のいいがかりがが厳しくなったようで 1 2023/08/21 09:59
- 数学 数Ⅲ、無限等比数列の問題についてです。 極限を調べる問題で、 場合分けのうちの |r|>1 の時、 3 2022/11/12 10:19
- IT・エンジニアリング インフラエンジニア(ネットワークエンジニア)の検証業務について教えてください。 インフラ初心者なので 2 2022/06/26 00:08
- その他(プログラミング・Web制作) .htaccessファイルの修正がこれで問題ないかどうか 1 2022/04/21 08:42
- サーバー メールサーバーについて詳しい方、メールサーバーの管理業務経験のある方、教えてください。 3 2022/11/12 18:24
- 英語 ”be”<動詞>と<助動詞>混同の誤り ― 形式主義文法論の混迷 12 2022/05/17 11:09
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
別ページのページ内リンクでの...
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
ホームページ上に『位置固定』...
-
(Javascript)印刷するファイル...
-
<a href="#" …>の意味を教えて...
-
【SSI】include file、include ...
-
pythonのWebスクレイピングでfi...
-
ページ遷移をコントロールしたい
-
Dreamweaver で 外部JSを読み込...
-
外部.jsの内容を一部置き換えて...
-
getElementsByNameで要素が取得...
-
レンタルサーバーでjavascript...
-
javaスクリプトについて質問で...
-
初心者javascript ウィンドウサ...
-
ユーザーが更新ボタンを押さな...
-
ウインドウの後ろに隠れている...
-
window.open でExcelファイルを...
-
bxslider、画像が3枚以上になる...
-
onbeforeunload時のwindow.open...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
別ページのページ内リンクでの...
-
bodyにwidth:100%をつける理由は?
-
横スクロールを右から左へ・・・
-
ボタンが押されたらWebページの...
-
テーブル内の数値を自動で計算...
-
ページの読み込みが完了してか...
-
"mailtoでメールの【氏名】【性...
-
テキストをクリックすると答え...
-
インラインフレーム内のスクロ...
-
<body id=~>の用途は?
-
リンクをクリックすると文字が...
-
複数のiframeの読み込みについて
-
htmlで任意の行の文字位置を右...
-
<HR>タグでつくる四角形につい...
-
Chromeがiframe内の「#~」に釣...
-
-css- ページオープン時やリロ...
おすすめ情報