javascript - 怎样让图片点击的时候换成另外一张,再点击其他图片时,别的图片都还原
高洛峰
高洛峰 2017-04-11 11:22:09
0
3
2329

张三

13419505758

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

张三

13419505758

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

.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;
}
效果类似这样

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

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all (3)
左手右手慢动作

思路跟选项卡差不多。

$(function(){ var $border = $(".border"); $border.click(function(){ $(this).find("img").attr("src","选中图片的路径"); $(this).siblings().find("img").attr("src", "未选中图片的路径") }); });
    阿神

    只说原理,不贴代码了:
    1、通过添加 class 的方式,改变两种状态不同的样式来实现;
    2、第一种方式的变种,使用 checkbox/radio的状态加css条件选择来实现;
    3、通过去除 checkbox/radio 的默认样式,再自己添加新的样式来实现;

      Peter_Zhu

      点击后:改变当前点击图片的src属性值为红色图片,再把其他图片的属性值改为白色图片的url

        Latest Downloads
        More>
        Web Effects
        Website Source Code
        Website Materials
        Front End Template
        About us Disclaimer Sitemap
        php.cn:Public welfare online PHP training,Help PHP learners grow quickly!