基本切换

Question

我有两个链接，并希望在点击任何链接时切换其类。

我的链接

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

我尝试使用此代码，因为在我的accpliceation中的其他一些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.删除旧链接中的所有类并给出旧的链接类＆＃34; btn＆＃34; 2.从点击的链接中删除所有类，并给出课程＆＃34; btn active＆＃34;

如何解决这个问题？

Answer 1

您只需要为当前点击的链接切换类，在此之前，删除所有链接的活动和焦点类，如下所示：

＆＃13;

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

＆＃13;

a.active {
  color: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

基本切换

以下代码切换按钮上的类active，这意味着它会在不存在时添加它，并在它出现时将其删除：

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

演示

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

body {
    margin: 0;
}

.btn {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    background: #99f;
    cursor: pointer;
}

.btn.active {
    background: #00f;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="trupple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>

仅允许一个活动按钮

如果您希望始终只有一个活动按钮，则只需从所有按钮中删除类active并将其添加到单击的按钮中，您可以这样做：

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

演示

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

body {
    margin: 0;
}

.btn {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    background: #99f;
    cursor: pointer;
}

.btn.active {
    background: #00f;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="tripple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>

Answer 3

您的jQuery选择器可能是问题所在。

您正在检测所有锚标记的点击次数为＆＃34; btn＆＃34;：

$('a.btn').click(function(){

但是你要删除课程＆＃34; btn＆＃34;。如何检测未来的点击？答：他们不会。

请注意，没有必要在行

中指定这两个类

$(this).toggleClass("btn active");

看起来你真的只想切换active类，所以只需要

$(this).toggleClass("active");

另外，我发现在任何给定时间准确指定我想要添加/删除的内容是最有用的。换句话说，我只尝试使用addClass()和removeClass()，而不是toggleClass()。它需要更多代码，但更安全。

Answer 4

请更改jquery代码，如下所示：

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

这对我有用。希望这会有所帮助：）

Answer 5

$("a.btn").on("click", function() {
			$(this).toggleClass("active");
			$(this).siblings().toggleClass("active");
		});

jquery toggleClass不工作

5 个答案:

基本切换

演示

仅允许一个活动按钮

演示