Question

我正在构建一个带有缩略图（beachthumb.jpg）的页面，使用JavaScript和jQuery，理论上应该使图像的全尺寸版本（beach.jpg）出现在缩略图下方的空间中。但是，全尺寸版本没有出现，我无法弄清楚导致这种情况的原因。任何人都可以看到问题可能是什么？

这是HTML，CSS和JavaScript（我很肯定jQuery是正确的，但如果你想看到它，请告诉我，我会添加它。）

提前感谢任何能够解开这个谜团的人！

HTML：

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<script src="js/jquery-1.11.0.js"></script>
<script src="js/index.js"></script>
<title>My Name</title>
</head>
<body>
<div class="nav">
    <div class="header">
        <h1>My Name</h1>
    </div>
    <div class="links">
        <ul>
            <li class="travels">Travels</li>
        </ul>
    </div>

</div>

<div class="main">
    <div class="maincontent">
        <div class="thumbs">
            <img src="images/beachthumb.jpg" class="beach">
        </div>

        <div class="big">
            <img src="images/beach.jpg" class="beach">
        </div>
    </div>
</div>
 </body>

CSS：

.nav {
margin:auto;
text-align: center;
}

.nav .header h1 {
font-family: 'Lobster', sans-serif;
color:#FF5A36;
font-size:60px;
}

.nav .links li {
display:inline;
list-style-type: none;
padding:10px;
font-size:25px;
font-family: 'Lobster', sans-serif;
font-size:30px;
color: #00A693;
}

.main {
background-image: url('images/lightcolumn.png');
width:100%;
height:100%;
position:absolute;
border-top: 2px #FF5A36 solid;
border-radius: 5px;
}

.thumbs {
display:none;
margin-left:auto;
margin-right:auto;
text-align:center;
}

.thumbs img {
display:inline;
position:relative;
padding:10px;
}

.big img {
text-align:center;
display:none;
}

.big {
text-align:center;
}

.maincontent div {
display:none;
}

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();
});
});

Answer 1

原因是这一行：

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

这会导致隐藏类big的div。因此，当父母被隐藏时，你在孩子身上褪色并不重要。

Answer 2

正如@sahbeewah所说，你正在隐藏div，什么是父元素，然后，你将转到fadeIn子元素。因此，编辑jQuery代码，单击thumbs并更改事件。

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

现在，在CSS中，您不需要隐藏.big img，因为其父级已隐藏。

.big img {
text-align:center;
}

这是fiddle demo。

编辑：

第二种变体，您可以在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，然后在.maincontent div子项上停用显示，divs除外。

.maincontent div img {
display:none;
}

这是second demo

图像没有出现

2 个答案: