Question

我有2个按钮，每个按钮都负责打开一个模态，但是，这个模式有两个标签用于注册和登录。我希望如果用户点击注册按钮然后在模态打开后注册选项卡应该是活动的如果用户点击登录按钮，则在模态打开后，登录标签应该是活动的

按钮的代码是

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">SIGN UP</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-lg_two">SIGN IN</button>

模态代码是

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <ul class="nav nav-tabs" >
                    <li class="nav-item col ">
                        <a class="nav-link active" href="#signup" data-toggle="tab" >Sign up</a>
                    </li>
                    <li class="nav-item col ">
                        <a class="nav-link" href="#signin" data-toggle="tab" >Sign in</a>
                    </li> 
                </ul>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="tab-content">
                                <div class="tab-pane active" id="signup">
                                    signup box
                                </div>
                                <div class="tab-pane" id="signin">
                                    signin box                  
                                </div>
                            </div>
                        </div>
                        <div class="col" id="social" >
                            Content
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
 </div>

任何人都可以告诉我该怎么做

Answer 1

你必须使用Javascript。这是一种方式。 Working JSFiddle

首先，摆脱两个按钮上的data-toggle="modal" data-target=".bd-example-modal-lg"。您需要在打开模式时运行以制表符定位的Javascript，如果您使用the modal show method手动打开模式，而不是通过data属性，则可以轻松执行此操作。

下一步，取而代之的是在每个按钮上添加一些内容以确定其定位的标签 - 例如data属性，其中包含id标签：< / p>

<button type="button" class="btn btn-primary" data-tab="signup">SIGN UP</button>

上次，添加一些Javascript来完成工作：

// Add an event handler to fire when our buttons are clicked
$('button').on('click', function() {
    // Find which button was clicked, so we know which tab to target
    var tabTarget = $(this).data('tab');

    // Manually show the modal, since we are not doing it via data-toggle now
    $('.bd-example-modal-lg').modal('show');

    // Now show the selected tab
    $('.nav-tabs a[href="#' + tabTarget + '"]').tab('show');
});

Note that as the docs describe，您定位的标签包含打开它的a链接，而不是标签本身的div。

如何打开模态中的特定选项卡

1 个答案: