单击css html后更改图像答案

【问题标题】：change image after click in css html单击css html后更改图像
【发布时间】：2021-03-11 09:25:20
【问题描述】：

如何将图像更改为另一个图像我有一个绿色图像，点击它会切换页面，绿色图像会变成白色图像点击前

点击后

我的代码

<ActiveLink activeClassName="bg" href="/about">
                        <li className="nav-item box-icon">
                          <a className="nav-link">
                            <img src="/assets/img/green.png" className="icon-size" />
                          </a>
                          <span>Graduate </span>
                        </li>
                      </ActiveLink>

我的 CSS

.box-icon {width: 200px;
             height: 150px;
             background-color: aqua;
             text-align: center;
             padding-top: 10px;
             font-family: "Poppins";
             font-size: 20px;
           }
       .icon-size {
         widows: 53px;
         height: 60px;
         margin-top: 25px;
       }
       .bg {
         content: url("../public/assets/img/white/white.png");
         background-color: #0fa49e;
         widows: 53px;
         height: 150px;
         color: #fff;
         font-family: "Poppins";
         font-size: 20px;
       }

【问题讨论】：

标签： html css next.js

【解决方案1】：

创建一个新课程超级简单bg-active

bg-active的css代码

.bg-active {
   content: url("afterclick.png") !important;
}

onClick 元素 addClass bg-active

【讨论】：

【解决方案2】：

你可以使用javascript来解决这个问题

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

【讨论】：