时间戳

首页 > 解决方案 > 点击单词后如何弹出图片和文字？html、css和js

javascript - 点击单词后如何弹出图片和文字？html、css和js

问题描述

我有这个清单：

<nav>
  Navigation Bar
  <ul>
    <li>
      <div class="popup" onclick="myFunction()">
        Myself
        <span class="popuptext" id="myPopup">My description </span>
        <img src="/images/picture.jpg" alt="My picture" />
      </div>

      <script>
        function myFunction() {
          var popup = document.getElementById("myPopup");
          popup.classList.toggle("show");
        }
      </script>
    </li>
    <li>Contact</li>
    <li>Other</li>
  </ul>
</nav>

我希望当我点击时Myself，我的描述会弹出我的图像。但它不起作用。

你能帮我吗，我做错了什么？

我需要使用 html、css 和 js。

谢谢！！！

标签： javascripthtmlcssimagepopup

解决方案

似乎您缺少一些 CSS 规则。

让我们看一下这一行：

popup.classList.toggle("show");

如果元素没有，这里的toggle函数将添加一个类类，否则将其删除。showpopup

这意味着默认情况下不应显示具有类的项目，除非popuptext添加了类。show

因此，您应该定义 2 个 CSS 样式，如下所示：

.popuptext.show {
  display: inline-block; // show element when you have the class name 'show'
}
.popuptext {
  display: none; // hide by default
}

这是一个工作示例：https ://jsfiddle.net/3bmqdcsg/

推荐阅读