前端照片点击选中效果

前端选中图片效果

html代码
 <div class="jy-box3">
     <div class="ylbx" @click="jckCardChange(1,'养老保险')" style="cursor: pointer">
	     <div id="bb1" ><img src="${request.contextPath}/statics/images/screen/czss-pic20.png" ></div>//图片
	     <div class="is-active1"></div>
	     <div class="ylbx-biaoti">养老保险</div>
	     <div class="ylbx-rs">人数</div>
	     <div class="ylbx-num">{{popcount(ylbxData.ylbx_amout1)}}</div>
	     <div class="ylbx-dw">人</div>                  
	     <div class="ylbx-rs2">同比增长</div>
	     <div class="ylbx-num2">{{ylbxData.ylbx_rate1}}%</div>
	     <div class="ylbx-dw2"><img src="${request.contextPath}/statics/images/screen/jt_t.png" alt=""></div>
	</div>
	 <div class="ylbx ylbx2" @click="jckCardChange(2,'失业保险')" style="cursor: pointer">
	      <div id="bb2" ><img src="${request.contextPath}/statics/images/screen/czss-pic20.png" ></div>
	      <div class="ylbx-biaoti">失业保险</div>
	      <div class="ylbx-rs">人数</div>
	      <div class="ylbx-num">{{popcount(ylbxData.ylbx_amout2)}}</div>
	      <div class="ylbx-dw">人</div>                  
	      <div class="ylbx-rs2">同比增长</div>
	      <div class="ylbx-num2">{{ylbxData.ylbx_rate2}}%</div>
	      <div class="ylbx-dw2"><img src="${request.contextPath}/statics/images/screen/jt_t.png" alt=""></div>
	 </div>
	 <div class="ylbx ylbx3" @click="jckCardChange(3,'工伤保险')" style="cursor: pointer">
	      <div id="bb3" ><img src="${request.contextPath}/statics/images/screen/czss-pic20.png" ></div>
	      <div class="ylbx-biaoti">工伤保险</div>
	      <div class="ylbx-rs">人数</div>
	      <div class="ylbx-num">{{popcount(ylbxData.ylbx_amout3)}}</div>
	      <div class="ylbx-dw">人</div>                  
	      <div class="ylbx-rs2">同比增长</div>
	      <div class="ylbx-num3">{{ylbxData.ylbx_rate3}}%</div>
	      <div class="ylbx-dw2"><img src="${request.contextPath}/statics/images/screen/jt_b.png" alt=""></div>
    </div>                       
    </div>
 </div>

js代码
 rlbxCardChange:function (type,title) {
            if (type == 1 || type == undefined || type == null){
                $("#aa1").css("display","block")//默认选中改图
                $("#aa2").css("display","none")//隐藏
                $("#aa3").css("display","none")
                title="养老保险";
            }else if (type == 2){
                $("#aa1").css("display","none")
                $("#aa2").css("display","block")
                $("#aa3").css("display","none")
                title="失业保险"
            }else if(type == 3){
                $("#aa1").css("display","none")
                $("#aa2").css("display","none")
                $("#aa3").css("display","block")
                title="工伤保险"
            }else {
                title="养老保险"
            }
            $("#index_name1").text(title+"缴费金额趋势");
            $.get(baseURL + "api/jyxs/rlbxnfje",{type:type},function (result) {
                console.log(result.map)
                if (result.code == 200) {
                    var data = result.map.data;
                    var data1 = result.map.data1;
                    var data2 = result.map.data2;
                    // var GgpValueMax = result.map.GgpValueMax;
                    rf(data, data1, data2, "rlbxnfje");
                } else {
                    console.error(result.msg);
                }
            });
        },

.jy-box3 .ylbx{ position: absolute; left: 46px; top: 88px; width: 515px;height: 250px; }
.jy-box3 .ylbx4{width: 515px;height: 250px;}