在单击触发按钮时在 Bootstrap 3 模式中打开特定的可切换选项卡

Question

我在 Bootstrap 3 中同时使用 modals 和 togglable tabs。我的目标是有 3 个模式触发按钮，每个按钮都会在模式中打开不同的选项卡。

My code so far

如您所见，所有触发按钮都会启动模式，但它们都显示tab 1。如何确保单击按钮 2 时显示 tab 2，单击按钮 3 时显示 tab 3？

Answer 1

您可以在 click 事件处理程序中使用这两种方法的 javascript 方法：

$('button').on('click', function() {
    whichtab = $(this).data('opentab');
    $('#myModal').modal('show');
    $('.nav-tabs li:eq('+whichtab+') a').tab('show');
});

Instend 的 data-toggle 和 data-target，我只是添加了一个 data-opentab。这些都是从 0 开始的（所以第一个选项卡是 0，第二个是 1 等等）：

<button class="btn btn-primary btn-lg" data-opentab="0" >
  Launch modal - open tab 1
</button>
<br /><br /><br />
<button class="btn btn-primary btn-lg" data-opentab="1" >
  Launch modal - open tab 2
</button>
<br /><br /><br />
<button class="btn btn-primary btn-lg" data-opentab="2">
 Launch modal - open tab 3
</button>