人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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を入れると、
ページアクセス時に一瞬非表示の部分が見えます。

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


●質問者: kt26
●カテゴリ:ウェブ制作
✍キーワード:BODY JavaScript prototype.js Web アクセス
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● かずぼっくり
●20ポイント

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

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

#subMenu{
display: none;
}

埋め込むならhead内に

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

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

◎質問者からの返答

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


2 ● nzk
●50ポイント

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>

これでどうでしょうか?

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ