リンクをクリックすると文字が見えるようにするには

解決済

質問者：Hazam
質問日時：2005/10/08 23:30
回答数：3件

Ｑ＆Ａ集を作っているのですが、文字が必然的に多くなりますので、クエスチョンをずらっとならべて答えを普段見えない形にし（クエスチョンの一覧が一目でわかるようにし）、Ｑの部分をクリックすると下に隠れていた答えが現れるようにしたいと考えています。

説明下手ですが、作成法分かる方、よろしくお願いいたします。
※尚、どのような形かは分かりませんが、サーバーの都合上PHP等のプログラムをもちいらないといけないならあきらめたいと思います。（現サーバーで使用不可）

※このサイトの様な形式です
http://kaju.kir.jp/fufuko/chart1.php

通報する

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

質問の本文を隠す

回答 (3件)

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

No.2ベストアンサー

回答者： shiina_niboshi
回答日時：2005/10/09 00:48

htmlでも可能です。

上記のサイトの関係の必要なソースを抜き出してみました。

<html>
<head>
<SCRIPT></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は変数みたいなもので１セットごとに変えなければならないです。

以下参考ＵＲＬのツリーのとこも参考になりますよ。

参考URL：http://www.nslabs.jp/javascript.rhtml

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。
先ほど確認することができました。
ここから自分なりに勉強していきたいと思います。

通報する

お礼日時：2005/10/09 01:53

No.3

回答者： kokorone
回答日時：2005/10/09 00:50

★１

<SCRIPT></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"）にします。

以上で、ご理解ください。