淡入/淡出 DIV 和嵌套 DIV答案

【问题标题】：Fade In/Out of DIV and nested DIV's淡入/淡出 DIV 和嵌套 DIV
【发布时间】：2012-11-05 18:41:21
【问题描述】：

我正在尝试让一个场景工作到我可以淡入淡出一个 div 的地方，用另一个 div 替换它。这部分我已经开始工作了，但是如果我淡入的 DIV 中包含 DIV，我的 DIV 就会完全消失。

例子：

<center>
        <ul id="menu">
            <li><a href="#content1">Home</a>&nbsp;&nbsp;|</li>
            <li><a href="#content2">Work</a>&nbsp;&nbsp;|</li>
            <li><a href="#content3">Blog</a>&nbsp;&nbsp;|</li>
            <li><a href="#content4">Contact</a></li>
        </ul>
    </center>
        <hr class="style-main">
        <center><img src="{image:homeHeaderImage}"></center>
</div>

 <div id="contentWrap">
   <div id="content1">
         Home, content should go here :)

     </div>

这行得通，如果 DIV "content1" 的内容看起来像这样，它将完美地淡入淡出。但是，由于我想设置“content1”和“content2”等内容的样式，所以我将 DIV 放在里面。

<div id="contentWrap">
   <div id="content1">
         <div id="homeContent">
         Home, content should go here :(
         </div>

     </div>

这使得当我单击链接以淡化这个特定的 DIV 时，它会完全变白，没有内容。我不知道为什么它不会呈现内容。

我将它用于我的 jQuery 脚本

$(function() {
$('#contentWrap div').hide();
$('#contentWrap div:first').show();
$('#thumbs a:first').addClass('active');

$('#thumbs a').click(function() {
    if ($(this).hasClass('active') == true) {
        return false;
    }
    else {
        $('a.active').removeClass('active');
        $(this).addClass('active');

        $('#contentWrap div').fadeOut();
        var contentToLoad = $(this).attr('href');
        $(contentToLoad).fadeIn();

        return false;
    }
});

});

这是一个 jsFiddle，主菜单项是有问题的。如您所知，其他的工作正常。

http://jsfiddle.net/uyAzp/

【问题讨论】：

您应该设置一个jsfiddle 来显示问题。
添加了 jsFiddle，也许会有帮助。
我更正了你的 jsfiddle 它设置错误jsfiddle.net/uyAzp/1

标签： jquery html css

【解决方案1】：

在你的 jQuery 中有这一行：

$('#contentWrap div').hide();

这会导致所有 div 隐藏，包括 #content1 中的 div

因此，当您单击主页按钮时，#content1 会淡出它，但包含您要显示的信息的 #content1 内的 div 仍然隐藏。

您可以通过将其添加到您的 css 中轻松解决它：

#homeContent{ display:block !important; }

虽然稍微重写你的 jQuery 可能会更好，这样你就不必一开始就隐藏所有这些 div。（通过你的 CSS 展示它们：没有）

【讨论】：

尝试将其添加到 CSS 但似乎仍然没有显示嵌套 DIV 的内容。嗯，这很奇怪。更新了 jsFiddle 中的 css，它在那里工作，但在我的机器上它不会显示它。感谢你的回答。这会奏效。
没问题。如果它可以帮助您解决问题，您能否支持我的回答？ :)
说我需要 15 名代表来支持你的答案。如果我在该 div 中创建更多 div，我将不得不添加 display: block !import;也给它添加css标签？
我要做的就是给你想要隐藏的所有 div 一个类，并使用该类来定位 jQuery 或 css 中的所有这些 div。

【解决方案2】：

您的 CSS 选择器已设置为选择 #contentWrap 下的所有 div 元素。

如果您将它们更改为#contentWrap > div，这将只选择那些直接子代。

像这样：

jsFiddle

为避免它们在加载时同时显示，您应该将 display: none 添加到 #contentWrap > div 的 CSS 中

【讨论】：

现在只需替换我正在使用的 sn-p 即可完美运行。非常感谢，我一直在努力解决这个问题。
你知道为什么它不能在本地机器上运行吗？直接从 jsFiddle 复制代码，它在我的 Mac 上不起作用。这是答案。 NVM，知道了，再次感谢伙计。
当我把它复制过来时，我在 css 中遗漏了一个 >，我花了一点时间才意识到它。

【解决方案3】：

只需更新这一行：

$('#contentWrap div:first').show();

这样：

$('#contentWrap div:first-child').show();

看看这是否有帮助。

【讨论】：

这使它一次显示所有四个 div，当我单击其他 div 并返回主 div 时，它仍然是白色的。