Onclick文字上的事件顯示圖像

Question

我是編碼新手，但我有很多關於HTML，CSS，Javascript和jQuery的基本知識。當我點擊文本時，我想讓其中一個圖像出現，但無法正確執行。

我正在創建一個餐館網站，您在其中點擊文本並在下方顯示食物圖像。我在我的css中創建了文本class="item"。我只想點擊它並顯示圖像。

是否可以用html和css來實現所有這些，或者我應該使用插件。

HTML：

<p><strong><span class="item">text</span></strong></p> 

<img src="images/sample.png"> 

CSS的 「項目」：

.item { color: #B24005; 
    font-size: 20px; 
    text-align: left 
} 
.item:hover { color: #00B295; 
      font-size: 20px; 
      text-align: left 
} 

Answer 1

您可以使用jQuery，只需添加myImg類圖像與display:none;

$(".item").on("click", function(){ 
    $(".myImg").fadeIn("slow"); //$(".myImg").show(); 
}); 

LIVE DEMO

純JavaScript將是：

function showImage() { 
    var image = document.querySelector(".myImg"); 
    image.style["display"] = "block"; 
} 

// add event listener to text 
var el = document.querySelector(".item"); 
el.addEventListener("click", showImage, false); 

CSS：

.myImg{ 
    display:none; 
} 

LIVE DEMO