
No.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
No.2
- 回答日時:
visibilityでhiddenしたんじゃ、空間が開くのは当然です。
見えないだけであるんだから。
見えないだけじゃなくて存在しないかのようにさせたいなら、visibilityじゃ
なくてdisplayでnoneにしましょう。ただし、document.all.item()というの
は方言なので、document.getElementById()を使うのがいいですよ。
No.1
- 回答日時:
>文字が見えない段階でも場所をとる
隠したほうのタグに 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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
LaTeXにて、1行で左寄せや中央...
-
HTMLのbody内に<style>~</styl...
-
プログラムの関連性を教えて下...
-
パワーポイント:テキストボッ...
-
リンク先のURLを別の文字にする...
-
パワーポイントの見出しの線の...
-
Google Keepで数字に勝手に下線...
-
Excel で下線が消えてしまうの...
-
URLが青くならない
-
outlook2003にて新規メッセージ...
-
seesaaブログのコメント欄を削...
-
アンダースコア(下線)のあるメ...
-
本性は醜いが、それを自覚した...
-
エクセルのセルの下線が消えない
-
Latexにおける下線のひき方のコト
-
絶対値を含む領域の問題
-
ライブドアブログがタグ付けで...
-
楽天ブログでロールオーバータ...
-
ウェブサイトのアクセスカウン...
-
Pythonのスクレイピングの質問...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLのbody内に<style>~</styl...
-
CSSでインラインフレームを非表...
-
<input>タグについて
-
行にドット下線ライン
-
文字位置の修正方法は
-
単語の右寄せ配置で1行下がる
-
CSSファイルにするには
-
htmlで、文字に線を囲むには何...
-
プログラムの関連性を教えて下...
-
VMLで塗りを透明にする
-
バナーを囲いたい。
-
ボタン クリック時にページ ポ...
-
ウェブサイトのポップアップの...
-
リンク先のURLを別の文字にする...
-
Excel で下線が消えてしまうの...
-
パワーポイント:テキストボッ...
-
Google Keepで数字に勝手に下線...
-
URLが青くならない
-
outlook2003にて新規メッセージ...
-
本性は醜いが、それを自覚した...
おすすめ情報