jQuery为按钮选择设置活动类

jQuery set active class for button select

本文关键字：活动 设置 选择 按钮 jQuery      更新时间：2023-09-26

我有一些像这样的html内容，

<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Low Cost/Effeciency</button>
</div>
<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Average</button>
</div>
<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">High Cost</button>
</div>

从我上面的片段来看，每个btn-group包含一个button。我想在button单击时添加active类，并删除active类，这是已经设置为active的按钮。它的意思就像单选按钮选择。

我在jQuery中尝试过这样做，但没有提供确切的解决方案。

$(document).on('click', '.btn-group button', function (e) {
    $(this).addClass('active').parent('.btn-group').find('button').removeClass('active');
});

我怎样才能做到这一点？

您可以使用toggleClass来完成此操作，

$(document).on('click', '.btn-group button', function (e) {
    $(this).toggleClass('active');
});

演示

编辑：

$(document).on('click', '.btn-group button', function (e) {
    $(".active").not($(this).addClass('active')).removeClass();
});

演示

请尝试以下操作：

$(document).on('click', '.btn', function (e) {
   $(".btn").removeClass("active");
   $(this).addClass("active")
});

试试这个

$(document).on('click', '.btn.btn-default', function (e) { $(".btn.btn-default").removeClass("active"); $(this).addClass("active"); });

相关文章：