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

Question

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

My code so far

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

Answer 1

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

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

除了数据切换和数据目标之外，我刚刚添加了一个数据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>