Как открыть первый tab в bootstrap 5 используя jquery?

Для открытия первого tab в Bootstrap 5 с использованием jQuery необходимо выполнить несколько шагов. Во-первых, у вас должна быть разметка HTML, в которой определены вкладки (tabs) с соответствующими ссылками и панелями контента. Далее нужно добавить JavaScript код, который будет инициировать открытие первого tab.

Вот пример кода:

1. Разметка HTML:

<div class="tab-wrapper">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1" href="#tab1">Tab 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2" href="#tab2">Tab 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tab3" href="#tab3">Tab 3</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab1">
            Content for Tab 1.
        </div>
        <div class="tab-pane fade" id="tab2">
            Content for Tab 2.
        </div>
        <div class="tab-pane fade" id="tab3">
            Content for Tab 3.
        </div>
    </div>
</div>

2. JavaScript код с использованием jQuery:

$(document).ready(function() {
    // Активация первого tab
    $('.nav-tabs a:first').tab('show');
});

В этом примере мы используем jQuery для добавления слушателя события ready, чтобы выполнить указанный код после загрузки документа. Мы находим первую ссылку во вкладках (с классом nav-tabs a:first) и вызываем метод tab('show'), который откроет первую вкладку.

Убедитесь, что у вас подключены библиотеки Bootstrap и jQuery перед использованием этого кода.