如何在一个页面上一次激活多个引导按钮？

Question

在使用引导按钮类时，我无法向用户显示多个活动按钮。我有两行按钮 - 我希望用户能够从每一行中选择一个值，并且我希望两个选定的按钮都显示为活动状态，以便用户可以轻松查看他们选择的选项。目前，如果用户选择一个按钮，它会突出显示，但一旦他们从另一行中选择另一个按钮，第二个按钮就会突出显示，但第一个按钮不再对用户显示为活动状态。

所以我有：

<div class="btn-group text-center">
                <button type="button" class="btn btn-primary" value="row 1 choice 1" />
                <button type="button" class="btn btn-primary" value="row 1 choice 2" />
              </div>
<div class="btn-group text-center">
                <button type="button" class="btn btn-primary" value="row 2 choice 1" />
                <button type="button" class="btn btn-primary" value="row 2 choice 2" />
              </div>

用户被指示从第一行和第二行中选择一个选项，我只希望两个按钮在选择后显示它们处于活动状态（通过指示较深的颜色），而不是只有一个能够处于活动状态一次。

Answer 1

您首先必须从所有按钮中删除“活动”类，然后将“活动”类添加到按下的按钮：

<script>
    $(".btn-primary").click(function () {
        $(btn-primary").removeClass("active");
        $(this).addClass("active");
    });
</script>

Answer 2

你可以在它们被点击时设置active类：

/* Latest compiled and minified CSS included as External Resource*/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body {
    margin: 10px;
}

<div class="btn-group text-center">
                <button type="button" class="btn btn-primary active" value="row 1 choice 1" />
                <button type="button" class="btn btn-primary" value="row 1 choice 2" />
              </div>
<div class="btn-group text-center">
                <button type="button" class="btn btn-primary" value="row 2 choice 1" />
                <button type="button" class="btn btn-primary active" value="row 2 choice 2" />
              </div>

Answer 3

您需要在按钮上切换一个活动类。使用按钮元素也存在问题，因为它们在单击它们时具有默认行为，这会弄乱样式。我已将它们更改为锚标签，并且效果很好。

<div class="btn-group text-center">
    <a class="btn btn-primary"  data-value="row 1 choice 1"></a>
    <a class="btn btn-primary"  data-value="row 1 choice 2"></a>
</div>
<div class="btn-group text-center">
    <a class="btn btn-primary" data-value="row 2 choice 1"></a>
    <a class="btn btn-primary" data-value="row 2 choice 2"></a>
</div>

<script>
    $(".btn-primary").click(function () {
        $(this).toggleClass("active")
    });
</script>

如果您需要使用 javascript 从锚标记中检索值，您可以像我一样使用 html 5 数据属性：

html:

<a id="btn4" class="btn btn-primary" data-value="row 2 choice 2"></a>

Js：

 $("#btn4").data("value")