0

我正在尝试使用 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");
 });

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

4

3 回答 3

6

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="";
}
于 2013-08-14T21:43:44.840 回答
1

您可以随时致电：

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

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

$("#first-button-selector").removeClass('active-css-class-name');
于 2013-08-14T21:46:02.007 回答
0

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

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

我知道它很脏，但它可以工作......

于 2013-08-14T21:47:46.583 回答