如何使用jQuery自动打开选项卡式模式使用特定的选项卡打开

问题描述：

我将数据从嵌入在选项卡式引导模式中的表单提交到laravel 5.2中的控制器方法。如何使用jQuery自动打开选项卡式模式使用特定的选项卡打开

每个选项卡都有其不同的形式，我需要在每个选项卡的表单顶部显示验证错误。这是我做到的：在所有选项卡的每个表单的顶部，我添加了验证错误显示代码。如果表单出现错误，则错误将显示在表单的顶部，但我无法看到它。现在，我做了一些搜索，并能自动重新打开情况下，没有填补使用这段代码在我看来形式的错误模式：

@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我没有尝试过你，我找到了一种方式，然后再回答。无论如何，感谢您的想法。 :) –

答

你可以，如果你想激活Section 2只需更换id_of_the_nav与tab2

演示用下面的代码

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

所以你的情况激活您想要的nav任何部分：https://jsfiddle.net/Prakash_Thete/s6jjmdc4/1/

答

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

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

这相当于实际点击标签。

如何使用jQuery自动打开选项卡式模式使用特定的选项卡打开

相关推荐