Лучшие способы написания этого кода 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>