我正在为 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,我最终要么切换了两个按钮,要么没有切换任何按钮。
有人可以指导我正确的方向吗?
最佳答案
您可以设置一些 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>
关于javascript - 使用 Bootstrap 按钮组交换 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24678136/