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で質問しましょう!
似たような質問が見つかりました
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- ヤフオク! ヤフオクに出品したいのですが、タグを実行出来ません。 2 2022/09/16 12:36
- Excel(エクセル) エクセルの数式で教えてください。 5 2023/02/10 15:11
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- Visual Basic(VBA) VBAにてメール作成した際、一部指定箇所のみ赤文字にしたいです。 下記の内容ですと作成されたメール本 1 2022/04/27 13:31
- その他(パソコン・スマホ・電化製品) ワードでテキストボックス内の文字を連動させない方法 2 2023/02/09 16:56
- Windows Me・NT・2000 IMEオプションが開かない 2 2023/04/07 18:04
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/02/15 08:30
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLのbody内に<style>~</styl...
-
CSSでインラインフレームを非表...
-
3つの文字「左端」、「中央」、...
-
リンク先のURLを別の文字にする...
-
URLが青くならない
-
Excel で下線が消えてしまうの...
-
Google Keepで数字に勝手に下線...
-
パワーポイント:テキストボッ...
-
PivotTableのデータソースを一...
-
ワードVBA 下線部のついた部分...
-
Wordでレイアウトを変えないで...
-
ある特定の表の枠線を消す方法は?
-
WORD2010 ハイパーリンクの下線...
-
URLを ここ にする方法
-
AppleのNumbersというアプリで...
-
GOOブログパーツ ドラえも...
-
ワードの表で下線と文字の入力
-
ExcelのVBAで下線のついている...
-
E-mail中の文章に赤で下線を引...
-
小数点以下の数字に下線を引くには
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLのbody内に<style>~</styl...
-
CSSでインラインフレームを非表...
-
リンクを設定した文字の上にマ...
-
iframe
-
初歩的な質問ですみません。部...
-
LaTeXにて、1行で左寄せや中央...
-
htmlで、文字に線を囲むには何...
-
バナーを横に並べたい
-
<input>タグについて
-
Textareaの幅をブラウザ画面の90%
-
オンクリックで文字が表示され...
-
文章をCSSで左揃えにする方法
-
プログラムの関連性を教えて下...
-
リンクの下線の色を変えると下...
-
リンク先のURLを別の文字にする...
-
Excel で下線が消えてしまうの...
-
URLが青くならない
-
パワーポイント:テキストボッ...
-
Google Keepで数字に勝手に下線...
-
アンダースコア(下線)のあるメ...
おすすめ情報