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

这个解决方案当然可以改进，但是遵循你的html结构，并且你可以轻松地理解这个。

 function change(){
      clothing.src = "../../CONTENT/Images/Blizuk/New folder/1.png";
      document.getElementById("butt1").style.border = "1px solid red"; 
    }
    function change2(){
     clothing.src = "../../CONTENT/Images/Blizuk/New folder/2.png";
      document.getElementById("butt2").style.border = "1px solid red"; 

       document.getElementById("butt1").style.border = "none";
       document.getElementById("butt3").style.border = "none";  

    }
function change3(){
     clothing.src = "../../CONTENT/Images/Blizuk/New folder/3.png";
      document.getElementById("butt3").style.border = "1px solid red"; 
       document.getElementById("butt2").style.border = "none";  

       document.getElementById("butt1").style.border = "none";  


}

Answer 2

您错过了将参数传递给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">

Answer 3

要突出显示单击按钮，您可以在单击时向其自身添加类...您通常还会动态循环遍历所有按钮，并从JSON或内联数据属性获取要显示的内容。我给你举个例子..

https://jsfiddle.net/9d25k66a/

您可以创建一个具有同一个类的按钮，以便使用jQuery或vanilla JavaScript轻松选择它们，如下所示：

<button class="btn" data-activeimage="red" >Button 1</button>
<button class="btn" data-activeimage="green">Button 2</button>
<button class="btn" data-activeimage="blue">Button 3</button>

您还要将要在该按钮上直接显示的数据添加到html中，而不必在javaScript中硬编任何内容。有数百种方法可以做到这一点，但下面简短的JS代码将向您展示为什么这个例如很方便。

// you select ALL the buttons by selecting all elements with the class .btn
// $buttons is now a jQuery Array which can be iterated over or mapped over with either a regular for loop or the jQuery each method
var $buttons = $('.btn');

// here we loop over all elements that we've stored in the $buttons variable
$buttons.each(function(idx){
    // and attach a click event to each one of them
    $(this).on("click", function(e){
    // preventing default button behaviour of e.g. Form Submit etc
    e.preventDefault();
    // Using the elements data attribute to apply a backgroudn color that is defined in the data-activeimage attribute of the html tag
    $(this).css('background-color', $(this).data('activeimage'))
  })
})

我希望你明白这一点。

Answer 4

尝试下面的代码，它的工作正常。

在你的样式表中添加下面提到的css。

 to add in style sheet : 
.hightLight {border: 5px solid #000 !important;}

html code
<img src="images/logo.png" id="butt1">

java script code
  <script>
$("#butt1").click(function() {
$(this).addClass("hightLight");
});

单击后保留边框/阴影

4 个答案: