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