Jquery 更改选定选项时如何选择选项卡？

在Bootstrap 4中，我如何在选择下拉选项时切换选项卡

<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>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>

...
...

根据我从你的问题中了解到的内容制作了一些东西，尽管它非常粗略地描述了你需要什么。看看这是否有帮助

HTML:

---

请你再举例说明一下好吗？这是正确的想法，但要手动操作。最好使用它们，使事情保持同步。

<select class="nav-select">
      <option href="#home" selected>Home</option>
      <option href="#profile">Profile</option>
    </select>
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
    </div>

$('select.nav-select').on('change',function(){
   var selected_id=$(this).find('option:selected').attr('href');
  $('.tab-content .tab-pane').removeClass('show active');
  $(selected_id).addClass('show active');
});