Question

如果我点击图标，图标必须更改为另一个图标

点击之后单击是否为“cat”，点击它应该更改为“rat”

主要是不使用jquery。

Answer 1

试试这个（jQuery代码）：

$(function() {
 $('.yourIconClass').click(function(){
   $("#yourIconId").attr('src',"img/picture1.jpg");
   return false;
 });
});

Answer 2

我想这不是打字员打高尔夫球，但我尝试过快速而肮脏的解决方案：

<img id="catrat" src="cat.jpg" onclick="javascript:changeImage()">

<script>
    function changeImage() {
        document.getElementById("catrat").src = "rat.jpg" 
    }
</script>

希望有所帮助，但我认为搜索会带来一千个具有相同解决方案的网站。

Answer 3

你真的应该在问这些简单的东西之前尝试解决你的问题。

检查https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById

没有真实代码的迷你示例

你需要一个带功能的脚本

你需要一个带id的div（在这里放置第一张图片）

单击图像时，调用脚本中的函数（）

使用上面的链接找出必须放在你的函数中的getelementbydid ... innerHTML。

Answer 4

<强> Demo

使用复选框

input[type="checkbox"] {
    width: 0;
    height: 0;
    margin: 0;
    border: 0 none;
    padding: 0;
    cursor: pointer;
}
input[type="checkbox"]:before {
    content: url('http://www.bernardbrogue.com/images/fb24_24.png');
    display: block;
    width: 24px;
    height: 24px;
    overflow: hidden;
}
input[type="checkbox"]:checked:before {
    content: url('http://isleofcapricasinos.com/uploadedImages/z-Asset_Library/Miscellaneous/Google-Plus-Logo-24x24.png?n=1533');
}

来自：How to change an image on click using CSS alone?

通过单击图标，它应该更改为另一个图标

4 个答案: