divを強制的にページに表示する - jQuery/CSS

Question

新しいページを読み込むのではなく、divのフレームを表示/非表示する1つのページメニューを作成しています。 （ほぼ）働いているセットアップは、This Penにあります。私が持っている問題は、デフォルトで最初のページ/フレームを表示しているのですが、その後は表示ブロック/なしを切り替える際の残りの動作と同じように動作します。

CSS/jQuery（どちらかクリーンな方）を使用すると、どのようにして最初のフレームをデフォルトで表示できますか？これはイライラするほど簡単ですが、私はそれの周りに私の頭を得ることができません。参考までに、私のjQueryとCSSは以下の通りです：

#item-1, #item-2, #item-3, #item-4, #item-5 { 
    display: none; 
} 
#item-1:target, #item-2:target, #item-3:target, #item-4:target, #item-5:target { 
    display:block; 
} 

//show first frame on page load 
$('window').onload(function() { 
    $('#item-1').show(); 
}) 

すべてのコードのためにペンを参照してください、私は何にも拡大することができる場合は私に知らせてください。

Answer 1

あなたは.show()ではなく、ドキュメントのウィンドウハッシュを更新して正しく表示するようにしてください。

$(document).ready(function() { 
    //show first frame on page load 
    $('#item-1').show(); 
}) 

参照：： $(document).ready(function() { window.location.hash = '#item-1'; })

Answer 2

onloadはjavascriptイベントであり、jqueryメソッドではありません。

ので、jqueryのでは、あなたが試すことができます：

$(document).ready(function(){ 
    $('#item-1').show(); 
}); 

と仮定し、あなたが使用することができ、JavaScriptでこれをしたい：

window.onload = $('#item-1').show(); 

または

window.onload = document.getElementById('item-1').display = 'block'; 

Answer 3

Updated codePen

しかし、ちょうどこのブロックが含まれているに応じて、あなたのcodepenを調整します。

ソリューションが可能性のjQueryを使用した：最初のframeのリンクをクリック

$(document).ready(function() { 
    $('a[href="#item-1"]')[0].click(); 
}) 

。

これが役に立ちます。