隐藏潜水直到选择链接

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/