このJQueryコードを書く方が良い

Question

ページのロード/リロード最初のボタンを背景色にしておきたいときに、別のボタンをクリックするとその最初のボタンの色が消えます。

私はそれのためにこのコードを作った：私は、他のボタンがたくさんある

$(document).ready(function(){ 
 
    $(".target1").css("background-color", "red"); 
 
    $(".target1").css("color", "white"); 
 
    $(".target2").click(function(){ 
 
    $(".target1").css("background-color", "transparent"); 
 
    $(".target1").css("color", "black"); 
 
    $(".target2").css("background-color","red"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="collapse3"> 
 
<ol> 
 
<button class="target1" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/1.html')">F01-Fabrication-1</button><br> 
 
         
 
<button class="target2" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/2.html')">F01-Fabrication-2</button><br> 
 
         
 
<button class="target3" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/3.html')">F01-Fabrication-3</button><br> 
 
         
 
<a class="target4" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/4.html')">F01-Fbuttonbrication-4</button><br> 
 
         
 
<button class="target5" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/5.html')">F01-Fabrication-5</button><br> 
 
</ol> 
 
</div>

ので、私はそれがベストプラクティスではないと思うのjQueryのコードのこの種をやって。 ..私にこれを行うよりよい方法を説明するのに助けが必要ですか？私はあなたの教えに感謝します！一つの特性を試み、より多くを設定するため

おかげ

Answer 1

あなたはthis機能します：

$(document).ready(function() { 
 
    $(".target").css("color", "black").css("background-color", "white"); 
 
    $(".target1").css("background-color", "red"); 
 
    $(".target1").css("color", "white"); 
 
    $(".target").click(function() { 
 
    $(".target1").css("background-color", "none"); 
 
    $(".target").css("color", "black").css("background-color", "white"); 
 
    $(this).css("background-color", "red"); 
 
    }); 
 
});

<button class="target target1" type="button"> 
 
    Button 1 
 
</button> 
 
<button class="target target2" type="button"> 
 
    Button 2 
 
</button> 
 
<button class="target target3" type="button"> 
 
    Button 3 
 
</button> 
 
<button class="target target4" type="button"> 
 
    Button 4 
 
</button> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JSFiddle Example

は、この情報がお役に立てば幸い！

EDIT：コードスニペット

Answer 2

：

$("p").css({"background-color": "yellow", "font-size": "200%"}); 

は（CSSのオブジェクトを渡す）方法。

Answer 3

に移動します。このような、それを小さくすることができます。

$(document).ready(function() { 
 
    $(".btn").click(function() { 
 
    $('.active').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }); 
 
});

.active { 
 
    background-color: red; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="collapse3"> 
 
    <ol> 
 
    <button class="target1 btn" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/1.html')">F01-Fabrication-1</button> 
 
    <br> 
 

 
    <button class="target2 btn" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/2.html')">F01-Fabrication-2</button> 
 
    <br> 
 

 
    <button class="target3" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/3.html')">F01-Fabrication-3</button> 
 
    <br> 
 

 
    <a class="target4" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/4.html')">F01-Fbuttonbrication-4</button><br> 
 
         
 
<button class="target5" type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/5.html')">F01-Fabrication-5</button><br> 
 
</ol> 
 
</div>