在按钮单击时隐藏 JQuery css

Question

我有一个我想要的网站，当有人点击任何按钮时，按钮边框就会显示出来。这是我的 JS：

$(document).ready(function() {

 $("#button1").on('click', function () {
var targetEl = $(this).data('target');
$.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
    $('.' + targetEl).fadeIn();
    $( "#button1" ).css( "border", "3px solid red" );

});

});

});


$(document).ready(function() {

 $("#button2").on('click', function () {
var targetEl = $(this).data('target');
$.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
    $('.' + targetEl).fadeIn();
    $( "#button2" ).css( "border", "3px solid red" );

});

});

 });

当我点击 button1 时，会出现边框，这很好。
但是当我单击 button2 时，我希望 button1 的边框消失（单击其他按钮时隐藏）。依此类推，我的网站上有 9 个按钮，我给了它们所有的 ID，我希望每个按钮在它们处于活动状态时都有一个边框（有人点击它们）。

Answer 1

$('[id^=button]').css("border","none");

或

$('button').css("border","none");

然后

$( "#button2" ).css( "border", "3px solid red" );

Answer 2

在$( "#button2" ).css( "border", "3px solid red" );下面添加这行$( "#button1" ).css( "border", "3px solid red" );