隐藏 div 直到选择链接答案

【问题标题】：Hide Div Until Link Is Selected隐藏 div 直到选择链接
【发布时间】：2012-08-29 07:28:16
【问题描述】：

我有一个隐藏/显示导航工作，但似乎无法弄清楚如何隐藏包含所有子 div 的主 div，直到选择导航中的链接之一。

请看我的小提琴：http://jsfiddle.net/blahblahAMYblah/KptZ6/

明确地说，我不只是希望所有子 div（即 about、gallery 等）在开始时隐藏，而是隐藏主 div。选择链接后，主 div 应该只显示选定的子 div。

【问题讨论】：

【解决方案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

【讨论】：

【解决方案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();
});

【讨论】：

谢谢！！所有答案都有效，但这个是最好的，因为当我向主 div 添加颜色时它有效。这就是我添加颜色的意思，顺便说一句：jsfiddle.net/blahblahAMYblah/KptZ6/7

【解决方案3】：

不确定你是否想要这样的东西，这是一个更新：

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

【讨论】：