Как использовать одинаковый id на разных вкладках (nav tabs)?

В Bootstrap есть возможность использовать одинаковый id на разных вкладках (nav tabs) с помощью JavaScript. Однако, стоит отметить, что использование одинаковых id на одной странице может привести к нежелательным результатам и конфликтам, поэтому лучше использовать уникальные идентификаторы для каждой вкладки.

Если вы все же хотите использовать одинаковый id на разных вкладках, вам необходимо использовать JavaScript, чтобы добавить обработчик событий для каждой вкладки и вручную отслеживать активные вкладки и их содержимое.

Давайте рассмотрим пример. Предположим, у нас есть две вкладки со следующей разметкой:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" id="tab1" data-toggle="tab" href="#content1">Вкладка 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab2" data-toggle="tab" href="#content2">Вкладка 2</a>
  </li>
</ul>

<div class="tab-content">
  <div id="content1" class="tab-pane fade">
    Содержимое вкладки 1
  </div>
  <div id="content2" class="tab-pane fade">
    Содержимое вкладки 2
  </div>
</div>

Теперь, чтобы использовать одинаковый id на разных вкладках, мы можем добавить обработчик событий, который будет отслеживать активные вкладки и связывать их с содержимым. Мы можем использовать метод jQuery, чтобы это сделать:

$(document).ready(function(){
  $('.nav-link').click(function(){
    var tabId = $(this).attr('id'); // получаем id текущей вкладки
    $('.tab-content .tab-pane').removeClass('active'); // удаляем класс 'active' у всех содержимых вкладок
    $('#' + tabId.replace('tab', 'content')).addClass('active'); // добавляем класс 'active' для связанного содержимого вкладки
  });
});

В этом примере мы добавляем обработчик событий для всех элементов с классом ".nav-link", которые являются вкладками. При клике на вкладку мы получаем ее id и связываем его с соответствующим содержимым, изменяя класс "active" для вкладки и содержимого.

Однако, снова отмечу, что использование одинаковых id на разных вкладках может вызвать проблемы и противоречить принципам хорошего программирования. Лучшей практикой является использование уникальных id для каждой вкладки и их содержимого.