0

<span>ラジオボタンのように作りたいが、ラジオボタンとは少し違うものが2つあります。

例えば。

<span>Button1</span>
<span>Button2</span>

ユーザーが Button1 をクリックすると、addClass '.active'Button1 のスパンに移動します。その間、ユーザーが Button2 をクリックすると、Button1 のスパンが削除され、'.active'Button2 のスパンに追加されます。これまでのところ、これはラジオ ボタンに似ています。しかし.active、ユーザーが既に存在する同じボタンをクリックしたときに、を削除する必要があり.activeます。

私の問題は、ボタン間でアクティブなクラスを切り替える方法がわからないことです。

4

2 に答える 2

2

Dumitru Chirutac の回答に基づく:

次のコードを使用して、彼の答えを修正して正しい動作にすることができます。

$(document).ready(function(){
    $('.btn').click(function(){ //use the correct selector for your html
        if($(this).hasClass('active')){
            $(this).removeClass('active');
        } else {
            $(this).addClass('active').siblings().removeClass('active');       
        }
    });
});

このようにして、現在がすでにアクティブかどうかを確認します。はいの場合は、アクティブを削除します。そうでない場合は、トグルとして使用してください。

更新されたデモ

于 2013-02-15T17:27:04.250 に答える
1

これを試して ：

HTML

<span class="btn">Button 1</span>
<span class="btn">Button 2</span>
<span class="btn">Button 3</span>
<span class="btn">Button 4</span>

Javascript

$(document).ready(function(){
   $('.btn').click(function(){
      $(this).addClass('active').siblings().removeClass('active');       
   });
});

デモを見る

于 2013-02-15T17:21:44.977 に答える