Bootstrap 4 выбор табов Select

313

09 сентября 2021, 00:30

Доброе время суток господа, вопрос вроде и простой а вроде и сложный, необходимо выбирать стандартные bootstrap 4 табы выпадающим списком select, а не в ссылками...

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Answer 1

Из вопроса несколько не ясно, показываются ли у вас заголовки табов. Если они есть, то все довольно просто.

$("select").change(function(){ 
   var id = $(this).val();    
   $("a[href='" + id + "']").tab('show'); 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  
 
 
<div class="m-3"> 
  <nav> 
    <div class="nav nav-tabs" id="nav-tab" role="tablist"> 
      <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab">Home</a> 
      <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab">Profile</a> 
      <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab">Contact</a> 
    </div> 
  </nav> 
 
  <div class="tab-content" id="nav-tabContent"> 
    <div class="tab-pane fade show active" id="nav-home" >home</div> 
    <div class="tab-pane fade" id="nav-profile" >profile</div> 
    <div class="tab-pane fade" id="nav-contact" >contact</div> 
  </div> 
</div> 
 
<select class="m-4 form-control w-25"> 
   <option value="#nav-home">home</option> 
   <option value="#nav-profile">profile</option> 
   <option value="#nav-contact">contact</option> 
</select>

Если заголовки не показываются, то в целом задача сводится к переключению классов .show .active, хотя, вероятно в этом случае не будут срабатывать события show.bs.tab и т.п., да и в целом тут bs не нужен, обычное скрытие/отображение блоков.

$("select").change(function(){ 
   var id = $(this).val(); 
   $(id).addClass('show active') 
        .siblings()  
            .removeClass('show active'); 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  
 
<div class="tab-content m-3" id="nav-tabContent"> 
  <div class="tab-pane fade show active" id="nav-home" >home</div> 
  <div class="tab-pane fade" id="nav-profile" >profile</div> 
  <div class="tab-pane fade" id="nav-contact" >contact</div> 
</div> 
 
    <select class="m-4 form-control w-25"> 
       <option value="#nav-home">home</option> 
       <option value="#nav-profile">profile</option> 
       <option value="#nav-contact">contact</option> 
    </select>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Несколько Select на странице

имеется несколько select обернутых в div на странице, необходимо чтобы при выборе внутри рядом стоящего div отображалась информация

174

jQuery

Поиск в древовидной структуре

Опытные коллеги кто сталкивался с такой древовидной структурой Bootstrap tree view как лучше всего организовать по ней поиск, если дерево очень большое,...

223

jQuery

Cкрыть и показать картинку при клике

есть 4 блока в каждом из которых находится картинкаКаким образом можно сделать так чтобы изначально не было видно изображений во всех четырех...

127

HTML

Как правильно использовать созданный в css треугольник?

Мне нужно сделать 4 треугольника в css, я делаю их через border примерно так:

243