オンクリックで文字が表示されるタグは、
文字が見えない段階でも場所をとるので悩んでいます。

オンクリックで文字が表示・非表示できるタグが紹介されているサイトはよくみかけるのですが、
文字が非表示の時に、折りたたんだ状態になっていてるタグが載っているサイトがありましたら教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

こんにちは。


※余り詳しくはない者ですが^^;

とりあえず、、、
「visibility='visible'」の部分を「display='block'」
「visibility='hidden'」の部分を「display='none'」
でいけるみたいですよ。

style="position:absolute;" でのサンプルをば。
※↑単独で使用することのない属性になります。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<html>
<head>
<style type="text/css">
<!--
#moji2 {position:absolute;left:0.6em;top:2em; /* em:Firefoxではずれる */
background-color:pink; /* 見やすいように設定 */
z-index:1;} /*-値:Firefox非対応*/
-->
</style>
</head>
<body>
<!--質問者さまのコードここから-->
<span onClick="document.all.item('moji2').style.visibility='visible'">
クリックする文字
</span>
<div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;">
この文字をクリックすると消えます
</div>
<!--ここまで-->
<br>
てすと<!--動作確認の為に入れた文字列-->
</body>
</html>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
※IE7、Sleipnir1.66で動作確認済。
※position指定をすると、全体のレイアウト指定の見直し(レイヤー指定?)が必要になってくると思います。
※「z-index:1」はなくてOKなのですが、値を-1にしてみると違いがわかると思います。
(但し、firefoxは非対応のようです。)

http://www.tohoho-web.com/css/reference.htm#Visual
http://www.htmq.com/style/position.shtml
    • good
    • 0

visibilityでhiddenしたんじゃ、空間が開くのは当然です。

見えないだけで
あるんだから。

見えないだけじゃなくて存在しないかのようにさせたいなら、visibilityじゃ
なくてdisplayでnoneにしましょう。ただし、document.all.item()というの
は方言なので、document.getElementById()を使うのがいいですよ。
    • good
    • 0

>文字が見えない段階でも場所をとる


隠したほうのタグに style="position:absolute;" を入れてもダメ
でしたか?

どうやって非表示にしているのかわかりませんが、文字列をタグで
んで style="display:none;" とし、Javascrptで none と block を
入れ替えるのでもダメでしたか?

onmouseover ですが、ここで position と visibility をいじるタイプの
折りたたみナビゲーションを利用しています。
http://blog.3d6.moo.jp/

この回答への補足

回答ありがとうございます。
どこに上記のタグを入れれば良いのか教えていただけませんか。
タグは以下の通りです。
<span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'">
クリックする文字
</span>

<div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;">
この文字をクリックすると消えます
</div>

補足日時:2007/07/08 07:42
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qボタンをクリックするとテキストエリアに文字が表示される。

はじめまして
下記内容のJavaScriptを見つけたのですが
これをどうにか違うものにしたいのです。

<html>
<head>
<TITLE>テキストエリアに複数項表示する</TITLE>

<script language="JavaScript"><!--
function setChars()
{
str1="テキストエリアに";
str2="複数項にわたる文字を";
str3="表示します。";
document.myFORM.myTEXT.value=str1+"\n"+str2+"\n"+str3;
}
/--></script>
</head>
<body>
<form name="myFORM">
<textarea name="myTEXT"rows="10"></textarea><br>
<input type="button"value="複数行表示"onClick="setChars()">
</form>
</body>
</html>
------------------------------------------------

例えば

(月・火・水・木)とそれぞれのボタンがあるとします。

そのボタンを押すと、複数行テキストへ
月曜→○○○○
火曜→○○○○
水曜→○○○○
木曜→○○○○
というように、表示させたいのです。

また、複数行テキストに入力された文字が消えず改行されて表示させたいのです。

自分でもいろいろと試してみたのですが、頭が悪く、全く思ったようにできません。

お忙しいところ大変申し訳ありませんが、

上記に記載した内容のスクリプトはありますでしょうか。

ご返答いただけると幸いです。

はじめまして
下記内容のJavaScriptを見つけたのですが
これをどうにか違うものにしたいのです。

<html>
<head>
<TITLE>テキストエリアに複数項表示する</TITLE>

<script language="JavaScript"><!--
function setChars()
{
str1="テキストエリアに";
str2="複数項にわたる文字を";
str3="表示します。";
document.myFORM.myTEXT.value=str1+"\n"+str2+"\n"+str3;
}
/--></script>
</head>
<body>
<form name="myFORM">
<textarea name="myTEXT"rows="10"></textarea><br>
<input ...続きを読む

Aベストアンサー

Wizard_Zeroと申します。

例えばこんな感じでしょうか?

<html>
<head>
<TITLE>テキストエリアに複数項表示する</TITLE>

<script language="JavaScript"><!--
function setChars(text)
{
if (document.myFORM.myTEXT.value || "") {
document.myFORM.myTEXT.value = document.myFORM.myTEXT.value + "\n"
}

document.myFORM.myTEXT.value = document.myFORM.myTEXT.value + text
}
/--></script>
</head>
<body>
<form name="myFORM">
<textarea name="myTEXT"rows="10"></textarea><br>
<input type="button" value="月曜" onClick="setChars('AAAAA')">
<input type="button" value="火曜" onClick="setChars('BBBBB')">
<input type="button" value="水曜" onClick="setChars('CCCCC')">
<input type="button" value="木曜" onClick="setChars('DDDDD')">
<input type="button" value="金曜" onClick="setChars('EEEEE')">
</form>
</body>
</html>

Wizard_Zeroと申します。

例えばこんな感じでしょうか?

<html>
<head>
<TITLE>テキストエリアに複数項表示する</TITLE>

<script language="JavaScript"><!--
function setChars(text)
{
if (document.myFORM.myTEXT.value || "") {
document.myFORM.myTEXT.value = document.myFORM.myTEXT.value + "\n"
}

document.myFORM.myTEXT.value = document.myFORM.myTEXT.value + text
}
/--></script>
</head>
<body>
<form name="myFORM">
<textarea name="myTEXT"rows="10"></textare...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。


人気Q&Aランキング

おすすめ情報