Javascriptで「WEBページにアクセスした時は非表示。ボタンをクリックすると表示」という物を作っています。


// デフォルト
function defaultMenu(){
  document.getElementById("subMenu").style.display = "none";
}
// 開け閉め(この部分はprototype.jsを使用)
function subMenu() {
var item = $('subMenu');
Element.toggle(item);
}

BODYタグに<body onload="defaultMenu();">
として、指定箇所を非表示にする為のコードを入れています。


そこで質問ですが、上記のようにbodyにonloadを入れると、
ページアクセス時に一瞬非表示の部分が見えます。

ボタンをクリックするまで表示させないようにするには、どうしたらよいのでしょうか?

回答の条件
  • 1人2回まで
  • 登録:2007/10/11 21:29:29
  • 終了:2007/10/12 17:56:23

回答(2件)

id:kazubokkuri No.1

かずぼっくり回答回数92ベストアンサー獲得回数82007/10/11 21:57:03

ポイント20pt

onloadというものは、ページの読み込みがすべて終わったあとに行われるので、どうしても一瞬表示されてしまいます。

なので、スタイルシートで最初から非表示にすればいいと思います。

#subMenu{
	display: none;
}

埋め込むならhead内に

<style type="text/css">
#subMenu{
	display: none;
}
</style>

こうすれば、bodyにonloadを入れる必要も無くなるはずです。

id:kt26

CSSでそれをすると常時非表示になります。ボタンを押しても表示されません。

2007/10/11 22:07:10
id:makotoworld No.2

nzk回答回数10ベストアンサー獲得回数02007/10/12 09:13:27

ポイント50pt

Element.toggle();でなく、styleの内容を変えるライブラリを使ってみました。

<html>
<head>
<title>div隠し</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="web/js/prototype.js"></script>
<script type="text/javascript"><!--
var odesc = false;
function openDesc(){
  if(!odesc){
     odesc = true;
     $('desc').style.display = 'block';
     $('footer').style.visibility = 'hidden';
  } else {
     odesc = false;
     $('desc').style.display = 'none';
     $('footer').style.visibility = 'visible';
  }
}
// --></script>
<style type="text/css">
#desc{
 display: none;
}
</style>
</head>
<body>
<h4>div隠し</h4>
<a href="javascript:void(0)" onclick="javascript:openDesc();">[これは何?]</a>
<div id="desc">
<pre>
説明文
■■■■■■■■■■■■■■■■■■
</pre>
</div>
<pre>
"[これは何?]"をクリックすると説明文が現れます。
△△△△△△△△△△△△△△△△△△
</pre>
</body>
</html>

これでどうでしょうか?

id:kt26

多少Javascriptエラーが出ますが、、こちらも参考にさせていただきます。

2007/10/12 17:56:05
  • id:kazubokkuri
    かずぼっくり 2007/10/11 22:14:42
    なんででしょうね・・・僕もちょっと調べてみます。
    ところで、prototype.jsを使用する必要はあるのでしょうか?
    ただ単に
    document.getElementById("subMenu").style.display = "block";
    とでもすればできると思うのですが。
  • id:kt26
    そのコードで開け閉め出来ますでしょうか?恐らく無理なのではないですか。
    prototype.jsはそれらを簡易的にする為のライブラリです。だから使っています。
  • id:Leclerc
    >||
    function subMenu() {
    Element.toggle($('subMenu'));
    }
    ~中略~
    <SPAN id="subMenu" style="display:none;">TEST<BR></SPAN>
    <INPUT TYPE="BUTTON" VALUE="test" STYLE="display:none;" ONCLICK="subMenu();">
    ||<
    prototype.js 1.5.0
    IE7 / Firefox2にて動作確認
  • id:Leclerc
    INPUTのSTYLEは誤ペースト。 いらない
  • id:kt26
    Leclercさん

    ありがとうございます。CSSのファイルにdisplay:noneをいれるのではなく、直接書いた方が良いんですね。

    また、書き方なども参考になりました。
  • id:kazubokkuri
    かずぼっくり 2007/10/12 17:20:33
    関数名から推測するに、もしかしてメニューの上にカーソルを置くとサブメニューを表示するようなものを作っているのでしょうか?
    それなら

    http://www.stylish-style.com/csstec/ultimate/css-roll-1.html
    http://www.stylish-style.com/csstec/ultimate/css-roll-2.html
    http://www.stylish-style.com/csstec/ultimate/css-roll-3.html
    http://www.stylish-style.com/csstec/ultimate/css-roll-4.html

    で紹介されている方法をオススメします。

    あと、ProtoTypeを使用しないもののサンプルを。

    <html>
    <head>
    <title>てすと</title>
    <script>
    function subMenu(){
    if (document.getElementById("subMenu").style.display == 'none'){
    document.getElementById("subMenu").style.display = 'block';
    } else {
    document.getElementById("subMenu").style.display = 'none';
    }
    }
    </script>
    </head>
    <body>
    <input type="button" value="クリック!!" onclick="subMenu();" />
    <div id="subMenu" style="display: none;">これが表示されたら成功。多分。</div>
    <div style="background-color: #FFFFCC;">普通の文章</div>
    </body>
    </html>


    どっちみち、CSSの知識は必要かもしれません。
  • id:kt26
    いえ。それではないです。その方法を使って違う方法に変えました。

    kazubokkuriさん、せっかくで申し訳ありませんが、回答も含めて全く意図と異なります。

    私がやりたいことは、現mixiのサブメニューのような動作です。
  • id:kazubokkuri
    かずぼっくり 2007/10/12 18:23:01
    僕の誤解でご迷惑お掛けして申し訳ありません。

    mixiは残念ながら紹介してもらえるような方がいないのでどんなものかは分かりませんが、無事完成できるといいですね。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません