Javascript 当单击另一个按钮时，jQuery在活动按钮上重置css

我正在尝试用jQuery设计一组按钮的样式。对于活动按钮，我希望它看起来不同，以便用户知道它的活动

这些按钮是通过php foreach循环生成的，如下所示：

foreach($result as $row){
  echo "<a class='linkClass linkStyle' onclick='javascript:swapContent(" . $row['Count'] . "," . $row['ProductID'] . ");'>" . $row['Count'] . "</a>";
}

第一位单击第一个按钮，这样当用户来到页面时，他们知道正在显示哪些活动内容。我的问题是，当按下另一个按钮时，样式将应用于它，并且它们也保留在另一个按钮上。我需要一种方法来重置或删除链接样式类时，另一个按钮被按下，只适用于任何按钮是活跃的时间

Javascript：

$(".linkStyle").click(function() {    
   $('.linkStyle.active').removeClass('active');
   $(this).addClass('active');   
 });

CSS:

PHP:

$active=“active”；
foreach（$结果为$行）{
回显“$row['Count']”；
$active=“”；
}

您可以随时调用：

$("#clicked-button-selector").addClass('active-css-class-name');

在按钮上单击，然后通过调用删除第一个按钮的样式：

$("#first-button-selector").removeClass('active-css-class-name');

---

尝试先重置所有受影响按钮的所有样式，然后应用css。 它可以是：

$(".linkStyle").click(function() {       
   resetBtnStyles();
   $(this).css("background","#258ace");
   $(this).css("border-top-color", "#258ace");
});

---

我知道这是肮脏的，但它可以工作…

添加和删除类要比添加和删除一组css样式容易得多。+1回答不错，但缺乏故事的士气：“最好使用类，而不是编辑节点上的css，原因有很多：可重用性、可维护性、层分离等”这还有一个额外的好处，那就是即使在整个文档加载并准备就绪之前，第一行也会被设置样式。@LexPodgorny是的，我很少（如果有的话）将样式直接应用于HTML，而是选择应用可用于设置样式的类。当您以后可能需要更改样式时，或者如果您允许用户使用不同的样式，或者如果您希望进行响应式设计，其中样式可能会根据设备或（当前）浏览器的大小而更改，则这一点尤为重要。由于特殊性，在不同的情况下更容易覆盖。

$("#clicked-button-selector").addClass('active-css-class-name');

$("#first-button-selector").removeClass('active-css-class-name');

$(".linkStyle").click(function() {       
   resetBtnStyles();
   $(this).css("background","#258ace");
   $(this).css("border-top-color", "#258ace");
});