如何使用 JQuery 在打开特定选项卡的情况下自动打开选项卡模式答案

【问题标题】：How to use JQuery to open a tabbed modal automatically with a particular tab open如何使用 JQuery 在打开特定选项卡的情况下自动打开选项卡模式
【发布时间】：2017-01-28 04:53:11
【问题描述】：

我正在将数据从嵌入在选项卡式引导模式中的表单提交到 laravel 5.2 中的控制器方法。

每个选项卡都有不同的表单，我需要在每个选项卡的表单顶部显示验证错误。我就是这样做的：在所有选项卡中每个表单的顶部，我添加了验证错误显示代码。如果表单有错误，错误将显示在表单顶部，但我看不到它。现在我做了一些搜索，并且能够自动重新打开模式，以防在我看来使用这段代码填写表单时出错：

@if ($errors->all())
    $('#modal').modal('show');
@endif

但这只会将模式打开到默认选项卡。我希望能够使用用户填写的表单打开模式到选项卡，如果可能的话，我想用 JQuery 来做到这一点。有可能吗？

我的模态看起来像这样：

<!-- Button to trigger modal -->
<a href="#TaskListDialog" role="button" class="btn btn-default" data-toggle="modal">Launch modal</a>

<div id="TaskListDialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
               <h3>Modal Heading</h3>
           </div>

           <div class="modal-body">
                <div class="tabbable">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
                        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                             //space for another form here
                         </div>
                        <div class="tab-pane" id="tab2">
                        //display validation error here
                            <form action="{{ route('someroute/') }}">
                                <input type="text" name="name" class="form-control"> <br>
                                <input type="email" name="email" class="form-control"> <br>
                            </form>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

如代码所示，选项卡为section 1 和section 2。

我的问题又是，如何使用section 2 激活而不是默认的section 1 打开模式？还是有更好的方法来完成所有工作？

任何帮助将不胜感激。谢谢。

【问题讨论】：

请告知我的解决方案是否对您有用？知道反馈总是好的:)
@Prakash 我没有尝试你的，在你回答之前我找到了方法。无论如何，谢谢你自己的想法。 :)

标签： jquery laravel-5 laravel-5.2 bootstrap-modal

【解决方案1】：

您可以使用以下代码激活nav 的任何部分

 $('.nav-tabs a[href="#id_of_the_nav"]').tab('show');

因此，如果您想激活Section 2，只需将id_of_the_nav 替换为tab2

演示：https://jsfiddle.net/Prakash_Thete/s6jjmdc4/1/

【讨论】：

【解决方案2】：

好吧，我找到了方法。我在 jquery 中使用了点击 trigger。

<script>
    $('#tab_id').trigger('click');
</script>

这相当于实际点击选项卡。

【讨论】：