jquery - 淡入/淡出 DIV 和嵌套 DIV

Question

我正在尝试实现一个场景，让我可以淡入和淡出一个 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/

Answer 1

在你的 jQuery 中你有这一行:

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

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

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

您可以通过将其添加到您的 css 中来轻松解决该问题:

#homeContent{ display:block !important; }

尽管稍微重写一下你的 jQuery 可能会更好，这样你就不必一开始就隐藏所有这些 div。 (通过你的CSS将它们放在显示:无)