Question

任何人都可以帮助我指出我在以下Twitter-Bootstrap 3片段中遗漏的内容：

        <fieldset>
                    <input type="radio" name="rbLogin" data-toggle="tab" data-target="#login-tab" />
                    <label for="login">Log in to my account</label>

                    <input type="radio" name="rbLogin" data-toggle="tab" data-target="#register-tab" />
                    <label for="register">Register for a new account</label>
        </fieldset>

        <div class="tab-content">
            <div class="tab-pane" id="login-tab">
                Login...
            </div>
            <div class="tab-pane" id="register-tab">
                Registration
            </div>
        </div>

单击任何单选按钮将按预期运行：显示正确的div，另一个隐藏。到现在为止还挺好。但是单选按钮没有进入检查状态。我怎样才能使它完全发挥作用？

客户明确要求不使用原始javascript或jQuery代码来隐藏/显示html内容。这是我的第一个Bootstrap项目，所以这可能是一个愚蠢的问题。

能够使用元素而不是单选按钮完成此操作，但确切的要求包含单选按钮。

Answer 1

我通过这种方式工作：

<label data-toggle="tab" data-target="#tab-1">
  <input type="radio"> foo
</label>
<label data-toggle="tab" data-target="#tab-2">
  <input type="radio"> bar
</label>

和一些js

$('label[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $('input').removeAttr('checked').removeProp('checked');
  $(this).find('input').attr('checked','checked').prop('checked','checked');
});

我知道这不是无js解决方案，但总比没有好。）

Answer 2

这将帮助您使单选按钮正常工作：

Bootstrap radio button “checked” flag

Bootstrap：使用html单选按钮显示/隐藏内容

2 个答案: