Question

我正在使用bootstrap。我在同一页面上有2个btn-group。他们每个都工作正常，但当我点击一个它取消选择（删除活动类？）另一个。我怎样才能保持活跃的课程？

<div class="container">
    <div id="focusarea" class="btn-group">
        <button type="button" class="btn btn-outline btn-primary" data-territory="pays">Pays</button>
        <button type="button" class="btn btn-outline btn-primary" data-territory="dept">Département</button>
        <button type="button" class="btn btn-outline btn-primary" data-territory="ville">Ville</button>
    </div>
</div>

<div class="container">
    <div id="foc" class="btn-group">
        <button type="button" class="btn btn-outline btn-primary" data-territory="pays">Pays</button>
        <button type="button" class="btn btn-outline btn-primary" data-territory="dept">Département</button>
        <button type="button" class="btn btn-outline btn-primary" data-territory="ville">Ville</button>
    </div>
</div>

Answer 1

$("#foc .btn").click(function(){
$("#foc .btn").removeClass("active");
$(this).addClass("active");
});

$("#focusarea .btn").click(function(){
$("#focusarea .btn").removeClass("active");
$(this).addClass("active");
});

Answer 2

如果要使用Jquery动态添加classess，请使用.addClass（）和.removeClass（）检查JqueryAPI以获取更多信息。

我尝试复制您的需求检查solution：

$('#foc').click(function() {
    $(this).addClass("active");
});

如何在同一页面上创建2个btn-group？

2 个答案: