javascript - 文本上的 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，只需使用 display:none; 将类 myImg 添加到您的图像中即可

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