如何自动打开下一个引导程序选项卡

时间:2018-04-17 13:17:40

标签: javascript jquery html tabs bootstrap-modal

我有一个模态;这是重要的。计数结束后模态关闭。当模态关闭时,我想要实现如何关闭下一个bootstrap。

这是HTML

<ul class="nav nav-tabs namelocationtable">
  <div class="tab-content">
    <li><a data-toggle="tab" href="#one">one></a></li>
    <li><a data-toggle="tab" href="#two">two></a></li>
    <li><a data-toggle="tab" href="#three">three></a></li>
    <div id="one" class="tab-pane fade in active">
      <h1>One</h1>
    </div>
    <div id="two" class="tab-pane fade in">
      <h1>Two</h1>
    </div>
    <div id="three" class="tab-pane fade in">
      <h1>Three</h1>
    </div>
  </div>
</ul>

我在标签1-模式中出现了一些内容;但是当模态关闭时;我想自动转到标签2。

Jquery的

//opent the confirmation modal
$("#location-confirm-model").modal('show');

//Timer function and the ajax request. 
function count_down_timer_function() {
  var sec = 5
  var timer = setInterval(function() {
      if (sec == 0) {
        clearInterval(timer);
        $("#timer-container").text('Saving details, please wait...');
        $("#location-confirm-model").modal('hide');
        console.log(1);
        $('.namelocationtable > .active').next('li').find('a');
        console.log(2);
        console.log(3);
      }
      $('#timer-container span').text(sec--);
    },
    1000);
  //Cancel count down and text
  $('.cancel-fill').click(function() {
    //Stop the countdown
    clearInterval(timer);
    //Reset timer
    $('#timer-container span').text('5');
  });
  setInterval(timer);
}
count_down_timer_function();

1 个答案:

答案 0 :(得分:0)

假设您正在使用bootstrap 3(请说明您正在使用的引导程序版本),您可以

$('#location-confirm-model').on('hidden.bs.modal', function () {
    $('.nav-tabs a[href="#two"]').tab('show');
})