javascript - 打开引导模式时使第一个选项卡成为事件选项卡

Question

我有一个按钮，当点击它时会显示一个引导模式模态包含侧边栏选项卡。

我的问题是当我关闭模式并通过单击按钮再次打开它时，它将使用最后一个激活的选项卡打开一旦我关闭模式并再次打开模式而不重新加载页面，我希望激活的选项卡成为第一个选项卡。

我的html

 // the button that will open the bootstrap modal  
            <div>
            <a href="#"  class="popupLink" data-toggle="modal" data-target="#yDetailsModal"> 
            </a>
            </div>

// bootstrap modal  


<div class="modal" id="MyDetailsModal" tabindex="-1" role="dialog" arialabelledby="myDetailsModal" aria-hidden="true" >

 <div class="modal-dialog modal-details" role="document">

  <div class="modal-content modal-details">

   <div class="modal-header">

 <button type="button" class="close close-button"  data-dismiss="modal" aria-label="Close" id="btnId"> </button>

  </div>


 <div class="modal-body">
  <div class=" tabs-left" id= "modal-tabs">
   <ul class="nav nav-tabs">

   <li class="active"> 
   <a href="#personal"  data-toggle="tab"></a></li>

  <li>
   <a  href="#promotion" data-toggle="tab"> </a> </li> 
    <li>
    <a  href="#vacation" data-toggle="tab"> </a> </li>


</ul>
 </div>



<div class="tab-content" id="tab-content">
 <div class="tab-pane active" id="personalInformation"> 
  <div>
   <ul>
     <li>

      <span> this is a personal information</span>
      </li>
</ul>
</div>
</div>

Answer 1

只需使用 Bootstrap 默认方法 modal 和 tab

$('#MyDetailsModal').on('show.bs.modal', function (event) { 
    $(this).find('.nav a:first').tab('show');
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div>
    <a href="#" class="popupLink btn btn-info btn-lg" data-toggle="modal" data-target="#MyDetailsModal">MyDetailsModal
    </a>
</div>

<div class="modal" id="MyDetailsModal" tabindex="-1" role="dialog" arialabelledby="myDetailsModal" aria-hidden="true">
    <div class="modal-dialog modal-details" role="document">
        <div class="modal-content modal-details">
            <div class="modal-header">
                <button type="button" class="close close-button" data-dismiss="modal" aria-label="Close" id="btnId"> </button>
            </div>

            <div class="modal-body">
                <div class=" tabs-left" id="modal-tabs">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#personal" data-toggle="tab">personal</a>
                        </li>
                        <li>
                            <a href="#promotion" data-toggle="tab">promotion</a>
                        </li>
                        <li>
                            <a href="#vacation" data-toggle="tab">vacation</a>
                        </li>
                    </ul>
                </div>

                <div class="tab-content" id="tab-content">
                    <div class="tab-pane active" id="personal">
                        this is a personal information
                    </div>
                    <div class="tab-pane" id="promotion">
                        this is a promotion information
                    </div>
                    <div class="tab-pane" id="vacation">
                        this is a vacation information
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>