javascript - 单击后保留边框/阴影

Question

我正在构建一个类似商店的东西，所以我有产品，侧面有圆形按钮，当我点击它们时，它会改变产品的颜色。一切都很完美，但我希望当我单击按钮时，按钮保持高亮状态。代码:

<img src="../../CONTENT/Images/Blizuk/New folder/11.png" onclick= "change()" id="but1">
<img src="../../CONTENT/Images/Blizuk/New folder/14.png" onclick = "change2()" id="but2"> 
<img src="../../CONTENT/Images/Blizuk/New folder/12.png" onclick = "change3()" id="but3"> 

CSS:

#but1 {
position:absolute;
width:5%;   
border:none;
margin-top:13%;
left:12%;   
}

#but1:hover {
-webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,1));
filter: url(#drop-shadow);    
}

#but2 {
position:absolute;
width:5%;   
border:none;
margin-top:13%;
left:17%;   
}

#but2:hover {
-webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,1));
filter: url(#drop-shadow);    
}

#but3 {
position:absolute;
width:5%;   
border:none;
margin-top:13%;
left:22%;   
}

#but3:hover {
-webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,1));
filter: url(#drop-shadow);
}

脚本:

<script>
function change(){
clothing.src = "../../CONTENT/Images/Blizuk/New folder/1.png"; 
}
function change2(){
clothing.src = "../../CONTENT/Images/Blizuk/New folder/2.png"; 
}
function change3(){
clothing.src = "../../CONTENT/Images/Blizuk/New folder/3.png"; 
}

</script>

Answer 1

您错过了将参数传递给 change() 函数。检查下面的代码片段以供引用。

function change(clothing) {
  clothing.src = "http://convertimage.net/frontframe/images/cute_ball_info.png";
  clothing.className += 'highlightMe';
}

#butt1 {
  position: absolute;
  width: 5%;
  border: none;
  margin-top: 13%;
  left: 12%;
}

#butt1:hover {
  -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
  filter: url(#drop-shadow);
}

#butt2 {
  position: absolute;
  width: 5%;
  border: none;
  margin-top: 13%;
  left: 17%;
}

#butt2:hover {
  -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
  filter: url(#drop-shadow);
}

#butt3 {
  position: absolute;
  width: 5%;
  border: none;
  margin-top: 13%;
  left: 22%;
}

#butt3:hover {
  -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1));
  filter: url(#drop-shadow);
}

.highlightMe {
  border: 1px solid red !important;
}

<img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" onclick="change(this)" id="butt1">