ボーダー/シャドウがクリック後に残る

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またはインライン・データ属性。また

<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> 

あなたは：私は

https://jsfiddle.net/9d25k66a/

あなたがうまく、次のようにjQueryやバニラのJavaScriptでそれらを選択するために、一つの同じクラスでいくつかのボタンを作成します..あなたに例をあげますそのボタンに直接表示したいデータを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"); 
});