- ベストアンサー
リンクをクリックすると文字が見えるようにするには
Ｑ＆Ａ集を作っているのですが、文字が必然的に多くなりますので、クエスチョンをずらっとならべて答えを普段見えない形にし（クエスチョンの一覧が一目でわかるようにし）、Ｑの部分をクリックすると下に隠れていた答えが現れるようにしたいと考えています。 説明下手ですが、作成法分かる方、よろしくお願いいたします。 ※尚、どのような形かは分かりませんが、サーバーの都合上PHP等のプログラムをもちいらないといけないならあきらめたいと思います。（現サーバーで使用不可） ※このサイトの様な形式です http://kaju.kir.jp/fufuko/chart1.php
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
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は変数みたいなもので１セットごとに変えなければならないです。 以下参考ＵＲＬのツリーのとこも参考になりますよ。
その他の回答 (2)
- kokorone
- ベストアンサー率38% (417/1093)
★１ <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> ★２ <A class=sd onclick="sd(kaku0);return false;"><h2>BOSS NAME:リトルデーモン</h2></a> ★３ <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のソースを一部引用させていただきました。 ★１：JavaScript部分 ★２：リンク定義 ★３：リンクをクリックされると表示されるテキスト部分 [[解説]] まず、★３ですが、<DIV>タグで、テキスト部分をブロック定義します。 style="DISPLAY: noneで以下の内容は、非表示になっています。 id=kaku0 でこのブロックの名前を定義します。 ★２では、onclick(クリックイベントが発生したら、以下の処理を実行する)を 定義します。 onclick="sd(kaku0);return false;" では、クリックしたら、★１を実行します。 sd(kaku0); は、★３で定義した名前"kaku0"を★１に教えます。 return false; では、クリックされた時の処理を中断します。 ★１では、"kaku0"をnという名前にもらいます。 もらったnの表示状態が「非表示」（n.style.display=="none"）ならば、 表示状態を「表示」(n.style.display="";)にします。 もらったnの表示状態が「表示」(n.style.display="";)ならば、 表示状態を「非表示」（n.style.display=="none"）にします。 以上で、ご理解ください。
お礼
詳細な説明ありがとうございます。 初心者の私としては#２さんのシンプルな構造から理解していきたいと思いますが、当回答の詳しい説明も合わせて、今後の勉強にさせて頂きます。
- kokorone
- ベストアンサー率38% (417/1093)
JavaScript というスクリプト言語を用いれば、 可能です。 JavaScriptが利用可能で、JavaScriptが理解で きるのであれば、上記URLのサイトのソース表示 で、理解できると思います。
補足
早速の回答ありがとうございます。 ソースは除いたのですが、私自身、HTMLを勉強したてで、理解できない部分もあり、URLのみ参考表示させて頂きました。 一つの文法さえあれば応用は私自身で行いたいと思っておりますので、よろしければ具体的に教えていただければ助かります。
お礼
ありがとうございました。 先ほど確認することができました。 ここから自分なりに勉強していきたいと思います。