Question

我正在尝试让一个场景工作到我可以淡入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，Home菜单项是有问题的。其他的工作正常，你可以说。

http://jsfiddle.net/uyAzp/

Answer 1

在你的jQuery中你有这一行：

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

这会导致所有div隐藏，包括＃content1

中的div

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

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

#homeContent{ display:block !important; }

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

Answer 2

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

如果您将其更改为#contentWrap > div，则只会选择直接子项。

像这样：

jsFiddle

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

的CSS中

Answer 3

只需更新此行：

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

：

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

看看这是否有帮助。

淡入/淡出DIV并嵌套DIV

3 个答案: