刪除隱藏圖像的「空白區域」

Question

我有一張圖像列表，我想隱藏/顯示基於哪個<li>元素單擊。我已經能夠成功地做到這一點，但是，圖像下方/上方仍有空白區域。這是我目前使用的代碼：

HTML

<div class="img-container"> 
    <img id="img1" src="img/image1.jpg" /> 
    <img id="img2" src="img/image2.jpg" /> 
    <img id="img3" src="img/image3.jpg" /> 
</div> 

CSS

.img-container{ 
    text-align: center; 
    visibility: hidden; 
    margin-top: 20px; 
} 

JS

var img1 = document.getElementById('img1'); 
var img2 = document.getElementById('img2'); 
var img3 = document.getElementById('img3'); 

("li:nth-child(2)").on('click', function() { 
    img1.style.visibility = 'visible'; 
    img2.style.visibility = 'hidden'; 
    img3.style.visibility = 'hidden'; 
}); 
("li:nth-child(3)").on('click', function(){ 
    img2.style.visibility = 'visible'; 
    img1.style.visibility = 'hidden'; 
    img3.style.visibility = 'hidden'; 
}); 
("li:last-child").on('click', function() { 
    img3.style.visibility = 'visible'; 
    img2.style.visibility = 'hidden'; 
    img1.style.visibility = 'hidden'; 
}); 

我曾嘗試與.toggle()配對的display: hidden CSS屬性玩弄但似乎無法讓它正常工作。我試圖尋找這個，但找不到任何東西去除隱藏的圖像所保存的空白區域。相對較新的JS/jQuery。謝謝。

Answer 1

你可以使用CSS屬性display和值none和block。 display屬性指定是否/如何顯示元素。

可見IMG替換：

img1.style.visibility = 'visible'; 

爲：

$("#img1").css("display", "block"); 

和替換無形IMG：

img1.style.visibility = 'hidden'; 

爲：

$("#img1").css("display", "none"); 

對於列表，可以使用更有用的inline-block而不是block。

Answer 2

當visibility設置爲hidden時，該元素未顯示，但仍佔用頁面上的空間。

當display設置爲none時，該元素既不顯示，也不佔用頁面上的任何空間。

更多的時候，我通常需要：

display = 'none'; 

或

display = ''; // to have it show 

Answer 3

如果尋找jQuery的解決方案：

var $img1 = $("#img1"), 
 
    $img2 = $("#img2"), 
 
    $img3 = $("#img3"); 
 

 
$("li:nth-child(2)").on("click", function() { 
 
    $img1.show(); 
 
    $img2.hide(); 
 
    $img3.hide(); 
 
}); 
 
$("li:nth-child(3)").on("click", function() { 
 
    $img1.hide(); 
 
    $img2.show(); 
 
    $img3.hide(); 
 
}); 
 
$("li:nth-child(4)").on("click", function() { 
 
    $img1.hide(); 
 
    $img2.hide(); 
 
    $img3.show(); 
 
}); 
 
$("li:last-child").on("click", function() { 
 
    $img1.show(); 
 
    $img2.show(); 
 
    $img3.show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul style="list-style: none;"> 
 
<li>Click a button:</li> 
 
<li><button>Show First Photo</button></li> 
 
<li><button>Show Second Photo</button></li> 
 
<li><button>Show Thrid Photo</button></li> 
 
<li><button>Reset</button></li> 
 
</ul> 
 

 
<div class="img-container"> 
 
    <img id="img1" width="300" height="300" src="https://blognumbers.files.wordpress.com/2010/09/1.jpg" /> 
 
    <img id="img2" width="300" height="300" src="https://blognumbers.files.wordpress.com/2010/09/2.jpg" /> 
 
    <img id="img3" width="300" height="300" src="https://blognumbers.files.wordpress.com/2010/09/3.jpg" /> 
 
</div>

Answer 4

除了使用display而不是visibility你也可以考慮讓JS一點就好辦了。您只需顯示img，其索引與點擊的li相同。

EG：

$(function() { 
 
    $(".img-controller li").on("click", function() { 
 
    var i = $(this).index(); 
 
    $(".img-container img").hide(); 
 
    $(".img-container img:eq(" + i + ")").show(); 
 
    }); 
 
    $(".img-container img").not(":first").hide(); 
 
});

.img-controller { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
.img-controller li { 
 
    display: inline-block; 
 
    background: #eee; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="img-controller"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul> 
 
<div class="img-container"> 
 
    <img src="https://placekitten.com/50/50" /> 
 
    <img src="https://placekitten.com/50/40" /> 
 
    <img src="https://placekitten.com/50/30" /> 
 
</div>