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

最初のビットで最初のボタンをクリックすることで、ユーザーがページにアクセスしたときに、どのアクティブ コンテンツが表示されているかを知ることができます。私の問題は、別のボタンを押すとスタイルが適用され、他のボタンにも残ることです。別のボタンが押されたときに linkStyles のクラスをリセットまたは削除し、その時点でアクティブなボタンにのみ適用する方法が必要です。

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 に答える