В Bootstrap 5 открыть вкладку по ссылке можно с помощью встроенного компонента "Tabs". Этот компонент позволяет создавать вкладки с различным содержимым и управлять ими.
Для начала, необходимо иметь в HTML разметке соответствующие элементы для вкладок. Внутри контейнера с классом "nav" создаем элементы <a> внутри <li>, которые представляют собой сами вкладки. Также добавляем атрибут "data-bs-toggle" со значением "tab" на каждую ссылку:
<div class="nav">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
</div>
Затем, необходимо создать соответствующие контейнеры для содержимого каждой вкладки, которые будут соответствовать "href" атрибутам ссылок. Используем класс "tab-content" и добавляем класс "fade" для добавления плавного перехода при переключении вкладок:
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p>Home content goes here.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p>Profile content goes here.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p>Contact content goes here.</p>
</div>
</div>
Теперь, если вы хотите открыть определенную вкладку по ссылке, вам потребуется добавить в URL адрес этой ссылки хэш (hash) соответствующий "id" контейнера вкладки. Например, если вы хотите открыть вкладку "Profile" по ссылке, добавьте #profile к концу URL адреса страницы.
При загрузке страницы с URL адресом, содержащим хэш, Bootstrap 5 автоматически откроет соответствующую вкладку. Если URL адрес не содержит хэш, то будет открыта первая вкладка.
Обратите внимание, что для работы с вкладками в Bootstrap 5 также необходимо подключить соответствующую JavaScript библиотеку:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
Таким образом, в Bootstrap 5 открыть вкладку по ссылке можно, добавив в URL адрес хэш, соответствующий идентификатору контейнера вкладки. Bootstrap автоматически откроет нужную вкладку при загрузке страницы.