Javascript 没有出现的图像

我正在构建一个带有缩略图（beachthumb.jpg）的页面，使用JavaScript和jQuery，理论上应该会在缩略图下方的空间中显示图像的全尺寸版本（beach.jpg）。然而，全尺寸版本没有出现，我无法找出是什么原因造成的。有人知道问题出在哪里吗

下面是HTML、CSS和JavaScript（我肯定jQuery是正确的，但是如果您也想看到它，请告诉我，我会添加它）

提前感谢所有能够解开这个谜团的人

HTML:

JavaScript:

$(document).ready(function () {

$('.maincontent .thumbs .beach').click(function(){
    $('.maincontent .big img').hide();
    $('.maincontent .big .beach').fadeIn();
});

$("ul .travels").click(function() {
    $(".maincontent div").hide();
    $(".maincontent .thumbs").show();
});
});

---

原因是这一行：

$(".maincontent div").hide();

---

这会导致类为

big

的div被隐藏。因此，当父元素被隐藏时，您在其子元素中淡入淡出并不重要。

正如@sahbeewah所说，您正在隐藏

div

，什么是父元素，然后，您将进入

fadeIn

子元素。因此，编辑jQuery代码，单击

thumbs

，并更改事件

$('.maincontent .big').hide();
$('.maincontent .big').fadeIn();

现在，在CSS中，您不需要隐藏

.big img

，因为它的父对象已经隐藏

.big img {
text-align:center;
}

这是

编辑：

第二种变体，您可以在

img

和

.beach

上设置选择器，但代码将很少更改

$('.maincontent .thumbs .beach').click(function(){
    $('.maincontent .big .beach').hide();
    $('.maincontent .big .beach').fadeIn();
});

$("ul .travels").click(function() {
    $(".maincontent div img").hide();
    $(".maincontent .thumbs .beach").show();
});

而且，CSS需要更改，首先删除

disaply:none.thumbs

中选择code>，然后禁用

.maincontent div

子项上的显示，但

divs

除外

.maincontent div img {
display:none;
}

---

下面是

为此创建一个JSFIDLE这太棒了，首次亮相。当然解决办法很简单，我就是看不见森林里的树木。非常感谢您抽出时间来研究我的问题，这让我感到非常紧张！你说得对！我怎么没看到呢？谢谢你抽出时间来看看我的问题，我真的很感激！

$('.maincontent .thumbs .beach').click(function(){
    $('.maincontent .big .beach').hide();
    $('.maincontent .big .beach').fadeIn();
});

$("ul .travels").click(function() {
    $(".maincontent div img").hide();
    $(".maincontent .thumbs .beach").show();
});

.maincontent div img {
display:none;
}