如何在模式中打开特定选项卡

Posted 2023-05-08

【中文标题】如何在模式中打开特定选项卡

【英文标题】：How to open a particular tab inside a modal

【发布时间】：2018-04-29 01:44:57

【问题描述】：

我有 2 个按钮，每个按钮负责打开一个模式，但是，这个模式有 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>

modal的代码是

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

谁能告诉我怎么做

【问题讨论】：

shown.bs.modal 模型打开后触发事件。

@sammy 你解决了这个问题吗，我的回答有帮助吗？

【参考方案1】：

您必须使用 javascript 来完成。这是一种方法。 Working JSFiddle.

首先，去掉两个按钮上的data-toggle="modal" data-target=".bd-example-modal-lg"。当您打开模式时，您需要运行以标签为目标的 Javascript，如果您使用 the modal show method 而不是通过 data 属性手动打开模式，您可以轻松地做到这一点。

下一步，在每个按钮的位置添加一些内容以识别它所针对的选项卡 - 例如data 属性，以及您的选项卡的id：

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