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;
}

DEMO

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/

隐藏Div直到选择链接

3 个答案: