Question

我需要以下按钮＆＃34;创建和帐户＆＃34;并且＆＃34;登录＆＃34;打开弹出模式并激活相应的选项卡。目前，两个按钮都会在默认的活动选项卡上打开弹出模式。活动班级在＆＃34;登录＆＃34;按钮。我需要＆＃34;创建一个帐户＆＃34;按钮激活“创建帐户”＃34;标签

<div class="form-group navbar-right">
    <button id="login" type="button" class="btn btn-default navbar-btn" data-target="#signin" data-toggle="modal">Create an Account</button>
    <button id="create" type="button" class="btn btn-primary navbar-btn" data-target="#signin" data-toggle="modal">Sign In</button>
</div>


<div class="modal fade" id="signin" role="dialog">
    <div class="" id="loginModal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
            <h3 style="color:black;">Have an Account?</h3>
        </div>
        <div class="modal-body">
            <div class="well">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#login" data-toggle="tab">Sign In</a></li>
                    <li class=""><a href="#create" data-toggle="tab">Create Account</a></li>
                </ul>

                <div id="myTabContent" class="tab-content ">
                    <div class="tab-pane active in" id="login">
                        <form class="form-horizontal" action='' method="POST">
                            <fieldset>
                                <div id="legend">
                                    <legend class="">SignIn</legend>
                                </div>    

                                <div class="control-group">
                                    <!-- Username -->
                                    <label class="control-label"  for="username">Username</label>
                                    <div class="controls">
                                        <input type="text" id="username" name="username" placeholder="" class="input-xlarge">
                                    </div>
                                </div>

                                <div class="control-group">
                                    <!-- Password-->
                                    <label class="control-label" for="password">Password</label>
                                    <div class="controls">
                                        <input type="password" id="password" name="password" placeholder="" class="input-xlarge">
                                    </div>
                                </div>

                                <div class="control-group">
                                    <!-- Button -->
                                    <div class="controls">
                                        <button class="btn btn-success">Signin</button>
                                        <div class="forgotpw">
                                            <a href="#">Forgot Username?</a><br/>
                                            <a href="#">Forgot Password?</a>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </form>                
                    </div>
                    <div class="tab-pane fade.in" id="create">
                        <form id="tab">
                            <label>Username</label>
                            <input type="text" value="" class="input-xlarge ">
                            <label>First Name</label>
                            <input type="text" value="" class="input-xlarge ">
                            <label>Last Name</label>
                            <input type="text" value="" class="input-xlarge ">
                            <label>Email</label>
                            <input type="text" value="" class="input-xlarge ">
                            <label>Address</label>
                            <textarea value="Smith" rows="3" class="input-xlarge span5"></textarea>     
                            <div>
                                <button class="btn btn-primary">Create Account</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button>
        </div>
    </div>
</div>

Answer 1

首先，您的代码中存在错误。（dupplicate id's）

<button id="login" type="button" class="btn btn-default navbar-btn" data-target="#signin" data-toggle="modal">Create an Account</button>
<button id="create" type="button" class="btn btn-primary navbar-btn" data-target="#signin" data-toggle="modal">Sign In</button>

和

<div class="tab-pane active in" id="login">
<div class="tab-pane fade.in" id="create">

所以我使用create_btn，login_btn和create_tab，login_tab重命名了这些ID。另一个错误是your button id is create and the label is Sign in和for the login id the label is Create an Account。（切换）

除了这些更正之外，您需要做的就是在代码中添加以下javascript：

$( document ).ready(function() {   
    $('#create_btn').on('click', function(){
        $('#create_tab').tab('show')
    })

    $('#login_btn').on('click', function(){
        $('#login_tab').tab('show')
    })
});

代码here。
结果here。

具有嵌套选项卡问题的Bootstrap弹出模式

1 个答案: