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，然后我在{{1}内的tab("show")元素上使用<a> }}匹配<li>。（我在你的模态中添加了一个关闭按钮，因此测试演示更容易）

href

<强> Demo Fiddle

Answer 2

利用shown.bs.modal事件。该活动包含有关所点击href的{{1}}的信息，然后您可以根据以下内容更改标签：

<a>

您的代码正常工作 - ＆gt;的 http://jsfiddle.net/pvo1sny8/

Answer 3

您需要定位标签的锚点并运行$.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/SeanWessell/2ct9zuu9/

如何使用特定选项卡激活

3 个答案: