Entfernen von 'Leerraum' von versteckten Bildern

Question

Ich habe eine Liste von Bildern, die ich ausblenden/anzeigen möchte basierend auf dem <li> Element angeklickt wird. Ich konnte das erfolgreich machen, allerdings ist immer noch der Leerraum unter/über dem Bild, das angezeigt wird. Hier ist der Code, den ich zur Zeit bin mit:

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

habe ich versucht, das Spiel mit der display: hidden CSS-Eigenschaft, gepaart mit .toggle() aber es scheint nicht richtig funktionieren zu können. Ich habe versucht, nach diesem zu suchen, aber kann nichts auf dem Entfernen des weißen Raumes finden, den das versteckte Bild hält. Bin relativ neu in JS/jQuery. Vielen Dank.

Answer 1

Sie die CSS-Eigenschaft verwenden, könnten display und Werte none und block. Die Eigenschaft display gibt an, ob/wie ein Element angezeigt wird.

für sichtbaren img ersetzen:

img1.style.visibility = 'visible'; 

für:

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

Und für unsichtbare img ersetzen:

img1.style.visibility = 'hidden'; 

für:

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

Konnte nützlicher inline-block statt block für Listen verwenden.

Answer 2

Wenn visibility auf hidden eingestellt ist, wird das Element nicht angezeigt, belegt aber immer noch Platz auf der Seite.

Wenn display auf none eingestellt ist, wird das Element weder angezeigt noch belegt es Platz auf der Seite.

Häufiger ich in der Regel brauchen:

display = 'none'; 

oder

display = ''; // to have it show 

Answer 3

Bei der Suche nach jQuery Lösung:

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

Neben der Verwendung von display statt visibility Sie auch Ihre JS machen ein wenig leichter in Erwägung ziehen könnte zu handhaben. Sie können einfach die img anzeigen, die den gleichen Index wie die der geklickt li hat.

Beispiel:

$(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>