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="";
}

Answer 2

你可以随时致电：

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

单击按钮上的

，然后通过调用

删除第一个按钮的样式

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

Answer 3

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

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

我知道它很脏但是有效...

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

3 个答案: