Как в бутстрап 5 tabs отображать весь контент?

В Bootstrap 5 вкладки (tabs) используются для отображения различного контента на одной странице. По умолчанию, в версии 5, Bootstrap не поддерживает отображение всего контента во вкладках одновременно. Однако, существуют различные подходы, которые можно использовать для достижения желаемого результата.

1. Активные вкладки с контентом:
Самый простой подход - использовать активные вкладки для отображения контента. По умолчанию, вкладка, помеченная как активная, будет отображать свой контент, в то время как остальные вкладки будут скрыты. При переключении между вкладками, контент будет обновляться соответственно.

<div class="container">
  <ul class="nav nav-tabs" id="myTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="tab1" data-bs-toggle="tab" data-bs-target="#content1" type="button" role="tab" aria-controls="content1" aria-selected="true">Вкладка 1</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tab2" data-bs-toggle="tab" data-bs-target="#content2" type="button" role="tab" aria-controls="content2" aria-selected="false">Вкладка 2</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tab3" data-bs-toggle="tab" data-bs-target="#content3" type="button" role="tab" aria-controls="content3" aria-selected="false">Вкладка 3</button>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="content1" role="tabpanel" aria-labelledby="tab1">
      <p>Контент вкладки 1</p>
    </div>
    <div class="tab-pane fade" id="content2" role="tabpanel" aria-labelledby="tab2">
      <p>Контент вкладки 2</p>
    </div>
    <div class="tab-pane fade" id="content3" role="tabpanel" aria-labelledby="tab3">
      <p>Контент вкладки 3</p>
    </div>
  </div>
</div>

2. Отображение всего контента на одной странице:
Если вам необходимо отобразить все вкладки и их контент на одной странице, вам придется написать собственный код или использовать сторонние библиотеки.

Например, вы можете использовать плагин jQuery, такой как "EasyTabs", который позволяет создать вкладки с контентом на одной странице. Для этого вам нужно будет подключить jQuery и плагин EasyTabs. Вот пример использования:

<div id="tab-container" class="tab-container">
  <ul class='etabs'>
    <li class='tab'><a href="#content1">Вкладка 1</a></li>
    <li class='tab'><a href="#content2">Вкладка 2</a></li>
    <li class='tab'><a href="#content3">Вкладка 3</a></li>
  </ul>
  <div class='panel-container'>
    <div id="content1">Контент вкладки 1</div>
    <div id="content2">Контент вкладки 2</div>
    <div id="content3">Контент вкладки 3</div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.easytabs/3.2.0/jquery.easytabs.min.js"></script>
<script>
  $(document).ready(function() {
    $('#tab-container').easytabs();
  });
</script>

Как видно из примеров, выбор решения зависит от вашей конкретной задачи и требований. Вы можете использовать стандартные возможности Bootstrap 5 или дополнительные плагины для достижения нужного результата.