Bessere Möglichkeiten, diesen JQuery-Code zu schreiben

Question

Wenn die Seite laden/neu laden möchte ich die erste Schaltfläche mit einer Hintergrundfarbe beibehalten, und wenn eine andere Schaltfläche geklickt wird, verschwindet diese erste Schaltfläche Farbe.

Ich habe diesen Code für sie gemacht:

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

ich viele andere Tasten haben, so diese Art von Code in JQuery tun Ich denke, es ist nicht die beste Praxis ist. ..Ich brauche Hilfe, um mir einen besseren Weg zu erklären, dies zu tun? Ich werde deine Lehren schätzen!

Dank

Answer 1

Sie wollen die this Funktion:

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

hoffe, das hilft!

EDIT: Verschoben in Code-Schnipsel

Answer 2

Für mehr als eine Eigenschaft try Einstellung:

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

passiert ein Objekt in css() -Methode.

Answer 3

Sie können es so kleiner machen:

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