Как выбрать вкладку при изменении выбранной опции?

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