Javascript 如何使用JQuery使一个类同时处于活动状态？

代码：

在上面的代码中，当单击“框一”时，“框一”处于活动状态将取代“框一”，当单击“框二”时，“框二”处于活动状态将取代“框二”

如何更改代码，以便当

box\u one\u active

处于活动状态时，

box\u two\u active

同时处于非活动状态。也就是说，用户必须单击其中一个来禁用另一个并启用一个

---

如何执行此操作？

您可以使用活动选择器删除活动类的所有跟踪

在您的情况下，您的活动类正在发生变化，这使事情变得复杂

您只需将活动类

.box\u激活即可，这将大大简化工作

然后，要删除它，请执行以下操作：

var $anchors = $(".box_one, .box_two");

$(document).on('click', function (e) {
    var $elem = $(e.target);
    if ($elem.hasClass('box_one') || $elem.hasClass('box_one_active')) {
        $elem.toggleClass('box_one box_one_active');
        $anchors.not($elem).addClass('box_two').removeClass('box_two_active');
    }
    else if($elem.hasClass('box_two') || $elem.hasClass('box_two_active')) {
        $elem.toggleClass('box_two box_two_active');
        $anchors.not($elem).addClass('box_one').removeClass('box_one_active');
    }
    else {
        $('.box_one_active').addClass('box_one').removeClass('box_one_active');
        $('.box_two_active').addClass('box_two').removeClass('box_two_active');
    }
});

您可以使用活动选择器删除活动类的所有跟踪

在您的情况下，您的活动类正在发生变化，这使事情变得复杂

您只需将活动类
.box\u激活即可，这将大大简化工作

然后，要删除它，请执行以下操作：

var $anchors = $(".box_one, .box_two");

$(document).on('click', function (e) {
    var $elem = $(e.target);
    if ($elem.hasClass('box_one') || $elem.hasClass('box_one_active')) {
        $elem.toggleClass('box_one box_one_active');
        $anchors.not($elem).addClass('box_two').removeClass('box_two_active');
    }
    else if($elem.hasClass('box_two') || $elem.hasClass('box_two_active')) {
        $elem.toggleClass('box_two box_two_active');
        $anchors.not($elem).addClass('box_one').removeClass('box_one_active');
    }
    else {
        $('.box_one_active').addClass('box_one').removeClass('box_one_active');
        $('.box_two_active').addClass('box_two').removeClass('box_two_active');
    }
});

我建议不要这样做。相反，只需切换一个活动类，然后编写CSS来处理类的组合

这里有一个例子：|

CSS:

HTML:

注意仅仅添加和删除“活动”类是如何改变事情的

在上面的例子中，我不是在覆盖样式，但您可以：|

我建议不要这样做。相反，只需切换一个活动类，然后编写CSS来处理类的组合

这里有一个例子：|

CSS:

HTML:

注意仅仅添加和删除“活动”类是如何改变事情的

在上面的例子中，我不是在覆盖样式，但您可以：|

我建议不要这样做。相反，只需切换一个
活动的
类，并编写CSS来处理类的组合（例如，
.box\u one.active{/*…style…*/}
和
.box\u two.active{/*…style…*/}）
相反。你能提供一个提琴吗？我不知道你的意思。Thanksher是一个现有的，你可以在上面构建：@starbucks:当然，我已经添加了一个答案和例子。我建议不要这样做。相反，只需切换一个
活动的
类，然后编写CSS来处理这些类的组合（例如，
.box\u one.active{/*…style…*/}
和
.box\u two.active{/*…style…*/}
相反。你能提供一个提琴吗？我不知道你的意思。Thanksher是一个你可以在上面构建的现有提琴：@starbucks:当然，我已经添加了一个例子。我想说的是，你把事情复杂化了。你不需要每个盒子都有一个唯一的活动类。你可以简单地使用
.box\u active
我想说的是，你的事情太复杂了。你不需要为每个框都设置一个唯一的活动类。你可以简单地为所有的框使用
。box\u active
，并使用基本CSS选择器
。box\u one.box\u active
设置样式。谢谢。我该如何制作当再次单击时，类会回到原来的状态？当在其他位置单击时，我如何使类回到原来的状态（空格等）@starbucks：再看一次示例：我已经这样做了。这是组合类的乐趣。我上面显示的代码只允许一个元素激活
类（从任何有它的东西中删除它，然后只将它添加到单击的东西中）。如果您使用该示例，它的工作原理应该相当清楚。您使用的是$（“div”）。单击（function（），我如何仅指定这两个div？@starbucks:使用CSS选择器。有关详细信息，请参阅jQuery（和CSS）文档。（例如，你在问题中显示的内容会起作用。）谢谢。再次单击时，我如何使类返回到原始类？以及在其他位置单击时（空格等），我如何使类返回到原始类@starbucks：再看看这个例子：我已经这么做了。这是组合类的乐趣。我上面展示的代码只允许一个元素激活
类（从任何有它的元素中删除它，然后只将它添加到单击的对象中）。如果你玩这个例子，应该很清楚它是如何工作的。你使用的是$（“div”）。单击（function（），我如何才能只指定这两个div？@starbucks:使用CSS选择器。有关详细信息，请参阅jQuery（和CSS）文档。（例如，你在问题中显示的内容可以工作。）
.box_one {
  /* Styles for `box_one` when not active */
  background: blue;
  color: white;
  font-weight: bold;
}
.box_one.active {
  /* Adds/overrides further classes for when `box_one` is also `active` */
  border: 2px solid red;
}
.box_two {
  /* Styles for `box_two` when not active */
  background: green;
  color: white;
  font-weight: bold;
}
.box_two.active {
  /* Adds/overrides further classes for when `box_two` is also `active` */
  border: 2px solid yellow;
}

<div class="box_one">This is box_one</div>
<div class="box_two">This is box_two</div>

$("div").click(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
});

.box_one {
  /* Styles for `box_one` when not active */
  background: blue;
  color: white;
  font-weight: bold;
}
.box_one.active {
  /* Adds/overrides further classes for when `box_one` is also `active` */
  background: red;
}
.box_two {
  /* Styles for `box_two` when not active */
  background: green;
  color: white;
  font-weight: bold;
}
.box_two.active {
  /* Adds/overrides further classes for when `box_two` is also `active` */
  background: yellow;
}