コードをデバッグするには、Chrome コンソールや Firefox Firebug などの Javascript コンソールを使用する必要があります。
まず、script
jQuery を定義する前に jQuery を必要とするブロックを配置します。
<head>
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
...
したがって、次のように表示されます (Chrome コンソールで)。
ReferenceError: $ is not defined
$(function(){
#box-container
次に、要素 ( ) が DOM 自体に表示される前に(最初のブロックで) 要素 ( ) にアクセスするスクリプトを実行しようとしているようです。jQuery.ready
その最初のブロックで使用できますが、面倒になる可能性があります。<div id="box-container">
代わりに、が定義された直後にこれを配置することをお勧めします。
<body ...>
<div id="box-container" ...>
...
</div>
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
$("#box-container").show();
});
})(jQuery);
</script>
デモ: http://jsfiddle.net/5JpVB/4 (setTimeout
劇的な効果のために a を使用します。)
<div ...>
または、を開いた直後に配置します。
<div id="box-container">
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
setTimeout(function(){
$("#box-container").show();
}, 2000);
});
})(jQuery);
</script>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/5/
そしてとどめの一撃(document.write
にもかかわらず):
<head>
...
<script>
document.write('<style>#box-container{display: none;}</style>');
</script>
...
</head>
http://jsfiddle.net/5JpVB/2/
はい、これはヘッダーにスタイルを「配置」するスクリプトでdisplay: none
あり、これまでに投げかけられてきた推測の一部を「きちんと」バイパスします (方法ごとに多かれ少なかれ欠点があります)。このメソッドには優雅さがあります (もちろん、厄介な の使用を除いてdocument.write
)。
さらに別の方法として、CSSdisplay: none
メソッドを使用します。
<head>
...
<style>
#box-container {
display: none;
}
</style>
...
<div id="box-container">
<noscript><style>#box-container{display: block;}</style></noscript>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/3/ (結果ページのみ、Javascript を無効にして動作を確認してください。)