JQuery是目前最為流行的JavaScript框架之一,它可以方便地操作HTML元素,比如我們可以使用JQuery設置圖片的顯示與隱藏。
<!-- HTML結構 --> <img src="image.jpg" id="myImg">
首先,我們需要設置相關的CSS樣式,來控制圖片的顯示與隱藏:
#myImg{ display: none; }
上述代碼將圖片的顯示屬性設置為none,即隱藏了該圖片。接下來,我們可以通過JQuery來設置圖片的顯示方式:
$(document).ready(function(){ //點擊按鈕,顯示圖片 $("button").click(function(){ $("#myImg").show(); }); //點擊圖片,隱藏圖片 $("#myImg").click(function(){ $(this).hide(); }); });
上述代碼中,我們使用了show()和hide()方法來控制圖片的顯示與隱藏。當點擊按鈕時,圖片將被顯示出來。當再次點擊圖片本身時,圖片會被隱藏。
綜上,這是使用JQuery輕松設置圖片的顯示與隱藏的方法。