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

Question

我正在尝试用jQuery设置一组按钮.对于活动按钮,我希望它看起来不同,因此用户知道它的活动状态.

这些按钮是使用php foreach循环生成的,如下所示:

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

我正试图用这个jQuery点击功能来设置它:

$(document).ready(function() { $('.linkClass').eq(0).click(); })

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

第一个按钮点击第一个按钮,以便当用户访问该页面时,他们知道正在显示哪些活动内容.我的问题是,当按下另一个按钮时,样式将应用于它,并且它们也保留在另一个按钮上.我需要一种方法来在按下另一个按钮时重置或删除linkStyles类,并且只将它应用于当时处于活动状态的任何按钮.

Answer 1

使用Javascript:

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

CSS:

.linkStyle.active{
background:#258ace;
border-top-color:#258ace;
}

PHP:

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