[解決済み] jquery toggleClassが動作しない

質問

私は2つのリンクを持っており、任意のリンクをクリックしたときにそのクラスを切り替えることができます。

私のリンクは

<a id="single" class="btn" >
<a id="double" class="btn active">

からクラスを変更したいのです。 btn to btn active 私はこのコードを持っています。

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).removeClass('focus active');
       $(this).removeClass('active');
       $(this).toggleClass("btn active");
   });
});

私のアプリケーションの他のJavaScriptでもこれらのクラスが追加されているので、私はこのコードで試してみました。

以下のような場合、正常に動作します。

<a id="single" class="btn" >
<a id="double" class="btn active">

しかし、最初のボタンが次のようにアクティブになっているとき

<a id="single" class="btn active" >
<a id="double" class="btn">

これはうまくいきませんでしたが、ダブルクリックすると以下のようなクラスが表示されます。

<a id="single" class="btn active" >
<a id="double" class="active">

というのは不思議なことです。 <a id="double" がアクティブなときは動作しませんでした。 <a id="single" がアクティブになります。

は、私がしたいのは、任意のリンクをクリックしたときです。 1. 古いリンクからすべてのクラスを削除し、古いリンクにクラス "btn"を与える。 2. クリックされたリンクからすべてのクラスを削除し、クラス "btn active"を与える。

どうすればいいですか？

どのように解決するのですか？

現在クリックされているリンクのクラスを切り替え、その前にすべてのリンクのアクティブとフォーカスのクラスを削除する必要があります、このように。

$('a.btn').click(function(){
  $("a.btn").removeClass("active focus");
  $(this).toggleClass("active");
});

a.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="single" class="btn active">single</a>
<a id="double" class="btn">double</a>