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

问题描述

问 题

<div class="content">

    <div class="border">
        <div class="content-first">
            <p class="first-name">张三</p>
            <p class="first-phone">13419505758</p>
        </div>
        <div class="content-second">
            <P class="second-text">浙江省台州市椒江区中心大道183号德志和大厦7楼</P>
            <p class="second-pic"><img class="second-img" src="images/kong.png"></p>
        </div>
    </div>
    <div class="border">
        <div class="content-first">
            <p class="first-name">张三</p>
            <p class="first-phone">13419505758</p>
        </div>
        <div class="content-second">
            <P class="second-text">浙江省台州市椒江区中心大道183号德志和大厦7楼</P>
            <p class="second-pic"><img class="second-img" src="images/kong.png"></p>
        </div>
    </div>
</div>
.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;
}
效果类似这样

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

解决方案

思路跟选项卡差不多。

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

这篇关于javascript - 怎样让图片点击的时候换成另外一张，再点击其他图片时，别的图片都还原的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！