javascript - 使用 Bootstrap 按钮组交换 Div

Question

我正在为 woocommerce 商店创建登录/注册表格。

默认的 woo 模板显示两个并排的表单，一个供新客户注册，一个供现有客户登录。恕我直言，这很糟糕。

我想在单个表单上方使用一个按钮组，根据用户的选择换出登录/注册表单，这样一次只显示一个选项。因此，我需要交换内容，并将事件类应用/删除到适当的按钮。

我做了以下事情:

1.) 添加了一个 Twitter Bootstrap 按钮组，如下所示:

<div class="col-sm-4 col-sm-offset-4">
    <div class="btn-group btn-group-justified">
        <div class="btn-group">
          <button type="button" id="login_click" class="btn btn-default active" data-toggle="button">Login</button>
        </div>

        <div class="btn-group">
          <button type="button" id="register_click" class="btn btn-default">Register</button>
        </div>
    </div>
</div>

2.) 将两种形式包装在 Bootstrap 类中并添加 ID 以实现简单定位。

<div id="login_form" class="col-sm-4 col-sm-offset-4">
 // login form
</div>

<div id="register_form" clas="col-sm-4 col-sm-offset-4">
//register form
</div>

我知道有built in jQuery plugins为了完成这个。我试过使用 .active 类但没有成功。我还尝试使用 data-toggle="button" 并使用 .toggle() 方法但没有成功。我无法全神贯注于适当的 jQuery，我最终要么切换了两个按钮，要么没有切换任何按钮。

有人可以指导我正确的方向吗？

Answer 1

您可以设置一些 jQuery 来隐藏/显示表单 div:

$('#switch-forms .btn').on('click', function() {
    $('#switch-forms .btn').removeClass('active');
    $(this).addClass('active');
});
$('#login_click').on('click', function() {
    $('#register_form').hide();
    $('#login_form').show();
});
$('#register_click').on('click', function() {
    $('#login_form').hide();
    $('#register_form').show();
});

JS fiddle :http://jsfiddle.net/ezrafree/HZbvA/

此外，您在 button#register_click 上拼错了 class 属性。更新后的标记是:

<div class="row">
    <div class="col-sm-4 col-sm-offset-4">
        <div id="switch-forms" class="btn-group btn-group-justified">
            <div class="btn-group">
                <button type="button" id="login_click" class="btn btn-default active">Login</button>
            </div>

            <div class="btn-group">
                <button type="button" id="register_click" class="btn btn-default">Register</button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div id="login_form" class="col-sm-4 col-sm-offset-4">
        <p>Login Form</p>
    </div>

    <div id="register_form" class="col-sm-4 col-sm-offset-4">
        <p>Register Form</p>
    </div>
</div>