在文本上单击事件以显示图像

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＆＃34; item＆＃34;：

.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

Answer 2

您可以在一行中完成此操作：

<p onclick="window.location.href='pathToYourImage'">text</p>