javascript - jquery toggleClass 不工作

Question

我有两个链接，我想在点击任何链接时切换它的类。

我的链接是

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

所以我想从 btn to btn active 更改类(class)我有这个代码

$(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”

如何解决这个问题？

Answer 1

您只需要为当前点击的链接切换类，然后再为所有链接移除事件类和焦点类，如下所示:

$('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>