bootStrap nav 选择指定的tab例子

这里是一个使用Bootstrap 4和jQuery的例子，用于在单击按钮时将特定选项卡设置为活动选项卡：

<!-- 导航栏 -->
<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="profile-btn" type="button" class="btn btn-primary">Set Profile Tab Active</button>
<button id="contact-btn" type="button" class="btn btn-primary">Set Contact Tab Active</button>

在这个例子中，我们有三个选项卡和两个按钮，每个按钮都用于将特定选项卡设置为活动选项卡。下面是JavaScript代码：

$(document).ready(function() {
  // 点击按钮设置Profile选项卡为活动选项卡
  $('#profile-btn').on('click', function() {
    $('#myTab a[href="#profile"]').tab('show');
  });

  // 点击按钮设置Contact选项卡为活动选项卡
  $('#contact-btn').on('click', function() {
    $('#myTab a[href="#contact"]').tab('show');
  });
});

在这个例子中，我们使用jQuery选择器来选择我们想要的选项卡，并使用`.tab('show')`方法将其激活。当我们单击“Set Profile Tab Active”按钮时，我们将`#myTab a[href="#profile"]`选项卡设置为活动选项卡。同样，当我们单击“Set Contact Tab Active”按钮时，我们将`#myTab a[href="#contact"]`选项卡设置为活动选项卡。