如何在特定选项卡处于活动状态时打开 Bootstrap 模式

Question

我正在尝试打开 bootstrap 模式中的选项卡，具体取决于 link 被点击的内容。无论我尝试过什么，它只会在第一个选项卡上打开。两个link如下：

<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>

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

我在代码中留下了原始 ID，以防我在替换它们时出错。

Answer 1

您需要定位标签的锚点和运行 $.tab('show') 函数。

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

既然您知道选项卡锚点具有 data-toggle=tab 和 href=id 属性，我们可以使用 link 中的 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/SeanWessell/2ct9zuu9/

Answer 2

利用 shown.bs.modal 活动。该事件包含有关单击 <a> 的 href 的信息，然后您可以根据该信息更改选项卡：

$("#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/

Answer 3

我在 <a> 元素中添加了 class .modal-toggle 来切换模式。此外，我添加了一些额外的功能，这些功能在点击时触发并获取点击元素的 href ，之后我在 [=16] 内的 <a> 元素上使用 tab("show") =] 匹配 href。（我在你的模式中添加了一个关闭按钮，所以更容易测试演示）

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

Demo Fiddle

如何在特定选项卡处于活动状态时打开 Bootstrap 模式

How to open a Bootstrap modal with a specific tab active

javascript

jquery

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3