更改所选选项时如何选择选项卡？

Question

如何在 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>

Answer 1

根据我对您的问题的理解做了一些事情，尽管它非常粗略地描述了您的需求。看看这是否有用。

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>

JS：

$('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');
});