圖像不出現

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

這將導致class big的div被隱藏。 因此，在父項被隱藏的情況下淡入它的子項並不重要。

Answer 2

就像@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 ，然后禁用.maincontent div子項上的顯示，但divs除外。

.maincontent div img {
display:none;
}

這是第二個演示

圖像不出現

問題描述

2 個解決方案

解決方案1
0 2014-05-22 06:28:26

解決方案2
0 已采納 2014-05-22 06:48:22

圖像不出現

問題描述

2 個解決方案

解決方案1 0 2014-05-22 06:28:26

解決方案2 0 已采納 2014-05-22 06:48:22

解決方案1
0 2014-05-22 06:28:26

解決方案2
0 已采納 2014-05-22 06:48:22