jquery - リンクが選択されるまで Div を非表示

Question

非表示/表示ナビゲーションが機能していますが、ナビゲーションのリンクのいずれかが選択されるまで、すべての子 div を含むメイン div を非表示にする方法がわかりません。

私のフィドルを見てください：http://jsfiddle.net/blahblahAMYblah/KptZ6/

明確にするために、最初にすべての子 div (つまり、about、gallery など) を非表示にするだけでなく、メイン div を非表示にする必要があります。リンクが選択されると、メイン div が表示され、選択された子 div のみが表示されます。

Answer 1

最初にdivを非表示にしてから、アイテムがクリックされたときに表示するだけです

$('body').on('click','nav a', function(e) {
    $('#main').css('display', 'block');
    $('#main').children().addClass('hide');
    $($(this).attr('href')).removeClass('hide');
    e.preventDefault();
});

#main{
    display:none;
}

デモ

Answer 2

あなたのフィドルを更新しました。

http://jsfiddle.net/KptZ6/2/

HTML を変更したくない場合は、次のように JavaScript を使用してメイン div を非表示にします。また、同じ方法で子を非表示にします（ を使用.hide()）

http://jsfiddle.net/KptZ6/5/

$(function() {
    $('#main').hide();
});

$('body').on('click','nav a', function(e) {
    $('#main').show();
    $('#main').children().hide();
    $($(this).attr('href')).show();
    e.preventDefault();
});​

Answer 3

あなたがこのようなものが欲しいかどうかわからない、ここにアップデートがあります：

http://jsfiddle.net/KptZ6/3/