淡入淡出DIV和嵌套的DIV

我试图得到一个场景，我可以淡入淡出div，用另一个div代替它。这部分我有工作，但我的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“内容1”的内容是这样的，它会完全淡入和淡出。但是，因为我想对“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/

来源

2012-11-05 Carlos Perez

你或许应该建立一个[的jsfiddle]（ http://jsfiddle.net）来显示问题。 – adeneo

添加了jsFiddle，也许会有所帮助。 –

我纠正了你的jsfiddle这是糟糕的安装http://jsfiddle.net/uyAzp/1/ – sbaaaang

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

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

像这样：

jsFiddle

为了避免他们都在同一时间上的负载显示，你应该添加display: none到CSS的#contentWrap > div

来源

2012-11-05 10:41:21 Elliott

现在，只需更换我使用的代码段即可完美实现。非常感谢你，我一直在努力解决这个问题。 –

没问题:)不要忘记标记为答案;） – Elliott

你知道为什么它不会在本地机器上工作。直接从jsFiddle复制代码，并且在我的Mac上无法使用。尽管这是答案。 NVM，明白了，再次感谢他。 –

在你的jQuery

你有这样一行：

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

这将导致所有的div隐藏，包括＃内容1内

所以当你点击home键，＃股利content1会淡化它，但包含您想要显示的信息的＃content1内的div仍然隐藏。

你可以很容易地通过增加这个你的CSS解决它：

#homeContent{ display:block !important; }

虽然它可能会更好小幅重写你的jQuery，所以你不必隐藏所有这些div开始。（把它们放在显示：没有经过你的CSS）

来源

2012-11-05 10:14:33 janvl

试图将其添加到CSS，但似乎并没有显示嵌套DIV的内容仍然。嗯，这很奇怪。更新了jsFiddle中的css，它在那里工作，但在我的机器上它不会显示它。感谢你的回答。这将工作。 –

没问题。如果能帮助您解决问题，您能否提出我的答案？ :) – janvl

说我需要15名代表upvote你的答案。如果我在该div内创建更多div，我必须添加display：block！import; css标签呢？ –

只需更新该行：

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

本：

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

看看是否有所帮助。

来源

2012-11-05 10:35:01 Jai

这使得它一次显示所有四个div，当我点击其他人并回到家庭div时，它仍然是白色的。 –

淡入淡出DIV和嵌套的DIV

回答

相关问题