bootStrap nav 根据tabindex设置选中

要在Bootstrap nav中选择特定的选项卡，可以使用jQuery选择器来选中您想要的选项卡，然后使用`.tab('show')`方法将其激活。具体而言，您可以使用以下代码将索引为`index`的选项卡设置为活动选项卡：

$('#myTab li:nth-child(' + (index + 1) + ') a').tab('show');

在这个例子中，我们使用了一个字符串拼接来动态地创建选择器。我们将索引加1，因为`:nth-child`选择器使用1为基础索引，而我们使用0为基础索引。

以下是一个完整的示例，用于在单击按钮时将第二个选项卡设置为活动选项卡：

<!-- 导航栏 -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

<!-- 选项卡内容 -->
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home content</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile content</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact content</div>
</div>

<!-- 按钮 -->
<button id="tab-btn" type="button" class="btn btn-primary">Set Second Tab Active</button>

以下是JavaScript代码：

$(document).ready(function() {
  // 点击按钮设置第二个选项卡为活动选项卡
  $('#tab-btn').on('click', function() {
    var index = 1; // 索引从0开始，因此第二个选项卡的索引为1
    $('#myTab li:nth-child(' + (index + 1) + ') a').tab('show');
  });
});

在这个例子中，我们使用了一个字符串拼接来动态创建选择器，并将索引设置为1来选择第二个选项卡。当我们单击“Set Second Tab Active”按钮时，我们将第二个选项卡设置为活动选项卡。