html中点击图片更换另一张,javascript,css_怎样让图片点击的时候换成另外一张,再点击其他图片时,别的图片都还原,javascript,css,html - phpStudy...

怎样让图片点击的时候换成另外一张,再点击其他图片时,别的图片都还原

张三

13419505758

浙江省台州市椒江区中心大道183号德志和大厦7楼

kong.png

张三

13419505758

浙江省台州市椒江区中心大道183号德志和大厦7楼

kong.png

.content {

width: 100%;

}

.content .border {

background-color: #ffffff;

padding-left: 3%;

padding-right: 3%;

margin-top: 10px;

}

.content .border .content-first {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

height: 30px;

line-height: 30px;

padding-top: 10px;

}

.content .border .content-first .first-name {

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

}

.content .border .content-first .first-phone {

-webkit-box-flex: 2;

-webkit-flex: 2;

-ms-flex: 2;

flex: 2;

text-align: left;

}

.content .border .content-second {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

padding-bottom: 10px;

}

.content .border .content-second .second-text {

-webkit-box-flex: 3;

-webkit-flex: 3;

-ms-flex: 3;

flex: 3;

height: 40px;

line-height: 20px;

color: #a9a9a9;

}

.content .border .content-second .second-pic {

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

text-align: right;

}

.content .border .content-second .second-pic .second-img {

width: 25px;

}

效果类似这样

点击那个白色图片就换成那张红的,没被点击的变成是白色的

相关阅读:

如何在widget发一条广播让service收到

关于下面这个网站的动画特效,有点看不懂 他使用html的data来制作的 请问这个是纯CSS和javascript可以制作的吗?

ubuntu 13.04怎么设定默认的鼠标加速度为0?

goalng编译时找不到包

见谅,是我没描述清楚问题,主线程访问网络并更新UI的问题

通过标签来检索内容,该如何设计数据库。

/tmp与/tmp/之间的区别?

Android 中 getAngleChange 如何使用?

用了Struts2的JSP页面里能不能由用户点击来改变Action设置的某个session的变量值?

jcifs.smb.SmbException异常,相关信息很少,求解?

安卓录音如何用代码实现录制手机内部的声音?非麦克风非通话

如何改善CSS加载顺序达到友好的显示效果?

如何批量提取网页中的特定字符串?

fis 的 命令行里logo是怎么生成的?

scrollLeft能用css3的transition做动画吗?

如何和使用vm的后端合作

两个TableView做同步选中行时,选中行高亮效果延迟的问题

json_encode json_force_object问题

EntityKey.EntityKeyValues主键值为null

UIScreenEdgePanGestureRecognizer 不能检测到状态?

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,你可以尝试使用JavaScript来实现这个功能。首先,你可以在HTML为每个图片添加一个唯一的ID,例如: ```html <img src="image1.jpg" id="img1" onclick="changeImage('img1')"> <img src="image2.jpg" id="img2" onclick="changeImage('img2')"> <img src="image3.jpg" id="img3" onclick="changeImage('img3')"> <img src="image4.jpg" id="img4" onclick="changeImage('img4')"> <img src="image5.jpg" id="img5" onclick="changeImage('img5')"> <img src="image6.jpg" id="img6" onclick="changeImage('img6')"> ``` 然后,你可以编写一个JavaScript函数来更改图片的src属性。这个函数可以检查当前图片的src属性,如果它等于原始图片的路径,就将其更改为新的图片路径。如果它不等于原始图片路径,就将其更改回原来的图片路径。例如: ```javascript function changeImage(id) { var img = document.getElementById(id); var originalSrc = img.src; var currentSrc = img.getAttribute('data-current-src'); if (currentSrc === originalSrc) { img.src = 'new-image.jpg'; img.setAttribute('data-current-src', 'new-image.jpg'); } else { img.src = originalSrc; img.setAttribute('data-current-src', originalSrc); } } ``` 在这个例子,我们使用了一个`data-current-src`属性来存储当前的图片路径,以便于在切换图片进行比较。当用户点击图片,`changeImage`函数会获取图片元素的ID,然后根据当前图片路径来判断是将其更改为新的图片路径还是将其更改回原来的图片路径。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值