删除隐藏图像的“空白”

Question

I have a list of images that I would like to hide/show based on which <li> element is clicked. I have been able to do this successfully, however, there is still the white space below/above the image that is showing. Here is the code I am currently using:

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

I have tried playing around with the display: hidden css property paired with .toggle() but cannot seem to quite get it working correctly. I have tried searching for this but cannot find anything on removing the white space the hidden image is holding. Am relatively new to JS/jQuery. Thanks.

Answer 1

When visibility is set to hidden , the element is not shown but still takes up space on the page.

When display is set to none , the element is neither shown nor does it take up any space on the page.

More often, I usually need:

display = 'none';

or

display = ''; // to have it show

Answer 2

You could use the css property display and values none and block . The display property specifies if/how an element is displayed.

replace for visible img:

img1.style.visibility = 'visible';

for:

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

And replace for invisible img:

img1.style.visibility = 'hidden';

for:

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

Could use more useful inline-block instead block for lists.

Answer 3

If looking for jQuery solution:

 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

In addition to using display instead of visibility you could also consider making your JS a little easier to handle. You could simply show the img which has the same index as that of the clicked 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>