Удаление «белого пространства» скрытых изображений

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

Я пытался играть с собственности display: hidden Css в паре с .toggle() но не может показаться, что он работает правильно. Я попытался найти это, но ничего не могу найти при удалении пробела, которое держит скрытое изображение. Является относительно новым для 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>