Javascript 使用引导按钮组交换div

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

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

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

我已经做了以下工作：

1.）添加了一个twitter引导按钮组，如下所示：

<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.）将这两个表单包装在引导类中，并添加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>

//登录表单
//登记表

我知道要做到这一点有很多方法。我尝试过使用

.active

类，但没有成功。我还尝试了使用

data toggle=“button”

和

.toggle（）

方法，但没有成功。我无法对适当的jQuery进行思考，要么两个按钮都被切换，要么没有按钮被切换

---

有人能给我指引正确的方向吗

代码已更新 没有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小提琴：

此外，您在

按钮#注册(u单击

)上拼错了

类

属性。更新的标记为：

<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>

登录
登记
登录表单

登记表

对于任何感兴趣的人，我都让它工作了。不是“引导方式”，但它可以按需要工作。拥有更好jQuery技能的人当然可以简化这一过程

<script>
$(document).ready(function() {
    var login_btn = $('#login_click');
    var register_btn = $('#register_click');
    var register_form = $('#registration_form'); 
    var login_form = $('#login_form');

    // set defaults 
    register_form.addClass("hidden");
    login_btn.addClass("active");

    // events for register button
    register_btn.on("click", function(){
        login_form.addClass("hidden");
        login_btn.removeClass("active");
        register_btn.addClass("active");
        register_form.removeClass("hidden");
    });
    //events for login button
    login_btn.on("click", function(){
        register_form.addClass("hidden");
        register_btn.removeClass("active");
        login_btn.addClass("active");
        login_form.removeClass("hidden");       
    });
});
</script>

$（文档）.ready（函数（）{
var login_btn=$（“#login_click”）；
var register_btn=$（“#register_click”）；
var register_form=$（“#register_form”）；
var login_form=$（“#login_form”）；
//设置默认值
登记表addClass（“隐藏”）；
登录添加类（“活动”）；
//注册按钮的事件
注册时（“单击”，函数（）{
登录表单addClass（“隐藏”）；
登录removeClass（“活动”）；
寄存器添加类（“活动”）；
注册表格removeClass（“隐藏”）；
});
//登录按钮的事件
登录时（“单击”，函数（）{
登记表addClass（“隐藏”）；
register_btn.removeClass（“活动”）；
登录添加类（“活动”）；
登录表单removeClass（“隐藏”）；
});
});

这是按钮的简单堆叠。通过将每个按钮包装在自己的div中，它将它们放在侧边栏的一侧，从而创建更多的工具栏效果，这正是我想要的样式。我要找的是关于jQuery的一些指导，我相信其他一切都是正确设置的。谢谢你的帮助。对不起，我不明白你的问题。如果我理解正确-代码应该可以帮助您。我更新了它。这是一个创造性的解决方案，但它会产生意想不到的行为。如果您两次单击同一按钮，它将交换表单。默认情况下，它也会按下登录按钮，这是一项要求。在Bootstrap中有内置的功能，我似乎无法让它工作。我很惊讶我没能找到这个所以，似乎是登录/注册表单的常见模式。使用Ezra Free解决方案，但使用toggleClass以避免冗余代码。必须这样做，但最好在这里有一个关于如何使用引导方法实现这一点的明确线程。这很接近，但在第一次运行时不会从登录按钮中删除该类。我想我记得我用过默认设置，我会试试的。还值得注意的是，默认状态是显示登录表单并按下登录按钮。啊，谢谢你，越来越近了，但是如果我试图打开登记表，按钮现在都是活动的。我甚至没有注意到这个类拼写错误，浏览器也能找到它，所以它不会影响任何东西。下面是另一个JSFIDLE，它使用rockTheWorld的答案，但仍然在按钮上设置活动类：答案尽可能接近，但仍然不正确。两个按钮执行相同的功能。为什么不使用导航标签或导航药片？再看一遍，我不得不同意@jme11的观点，即您应该在导航药片中使用引导标签。以下是我设计的一个版本，将导航药片设计成一个按钮组：

$('#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();
});

<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>

<script>
$(document).ready(function() {
    var login_btn = $('#login_click');
    var register_btn = $('#register_click');
    var register_form = $('#registration_form'); 
    var login_form = $('#login_form');

    // set defaults 
    register_form.addClass("hidden");
    login_btn.addClass("active");

    // events for register button
    register_btn.on("click", function(){
        login_form.addClass("hidden");
        login_btn.removeClass("active");
        register_btn.addClass("active");
        register_form.removeClass("hidden");
    });
    //events for login button
    login_btn.on("click", function(){
        register_form.addClass("hidden");
        register_btn.removeClass("active");
        login_btn.addClass("active");
        login_form.removeClass("hidden");       
    });
});
</script>