如何打开具有特定选项卡的Bootstrap模式

Question

我试图让bootstrap模式中的选项卡打开,具体取决于所点击的链接.无论我尝试过什么,它只会在第一个标签上打开.这两个链接如下:

<a href="#tab-mileage" data-toggle="modal" data-target="#buyers-report-modal" >Mileage</a>
<a href="#tab-wrong-vehicle" data-toggle="modal" data-target="#buyers-report-modal">Wrong vehicle?</a>

并且模态的标记在这里:

<div class="modal" id="buyers-report-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-offset-top">
    <div class="modal-content">
    <div class="modal-body">
    <div class="sd-tabs sd-tab-interaction">
      <div class="row">
        <ul class="nav nav-tabs col-md-3 custom-bullet">

          <li class="active"><a data-toggle="tab" href="#tab-wrong-vehicle"> Wrong Vehicle?</a></li>
          <li><a data-toggle="tab" href="#tab-mileage"> Mileage</a></li>

        </ul>
        <div class="tab-content col-md-9">
          <form id="tab-wrong-vehicle" class="tab-pane active" action="" method="post"> <!-- Wrong Vehicle? -->

            <h3 class="tab-title">Tab 1</h3>

          </form> <!-- Wrong Vehicle? -->



          <form id="tab-mileage" class="tab-pane"> <!-- Mileage -->

            <h2 class="tab-title-resp hidden-md hidden-lg"> Mileage</h2>
            <h3 class="tab-title">Tab 2</h3>

          </form> <!-- Mileage -->

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

我需要在单击的链接上打开模式,例如,如果我单击第二个链接,它将打开模式中的第二个选项卡.任何帮助将不胜感激,我无法在任何地方找到解决方案.

我在代码中留下原始ID,因为我在替换它时犯了一个错误.

Answer 1

我在切换模态.modal-toggle的<a>元素中添加了一个类.此外,我已经添加了触发点击次数和获得的一些的附加功能href点击的元素,我使用后tab("show")的上<a>内侧元素<li>相匹配的href.(我在你的模态中添加了一个关闭按钮,因此测试演示更容易)

$('.modal-toggle').click(function(e){
    var tab = e.target.hash; 
    $('li > a[href="' + tab + '"]').tab("show");
});

演示小提琴

Answer 2

您需要定位选项卡的锚点并运行该$.tab('show')函数。

http://getbootstrap.com/javascript/#tabs

由于您知道选项卡锚点具有 data-toggle=tab 和 href=id 属性，我们可以使用链接中的 href 传递给选项卡的选择器。

$('a[data-toggle=modal][data-target]').click(function () {
    var target = $(this).attr('href');
    $('a[data-toggle=tab][href=' + target + ']').tab('show');
})

演示： http : //jsfiddle.net/SeanWesell/2ct9zuu9/

Answer 3

利用这次shown.bs.modal活动.该事件包含有关所href单击的信息<a>,然后您可以根据以下内容更改选项卡:

$("#buyers-report-modal").on('shown.bs.modal', function(e) {
    var tab = e.relatedTarget.hash;
    $('.nav-tabs a[href="'+tab+'"]').tab('show')
})   

你的代码工作 - > http://jsfiddle.net/pvo1sny8/