How to make the selected tab active?

Question

Bootstrap

How to make the selected tab active?
for example here:

<nav class="navbar navbar-expand-lg navbar-light bg-light  flex-row justify-content-center" th:fragment="navbar">
    <ul class="nav nav-pills" id="pills-tab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="pills-home-tab" th:href="@{/}" role="tab"
               aria-controls="pills-home" aria-selected="true" aria-current="page">Главная</a>
        </li>
        <li class="nav-item ">
            <a th:href="@{/parsing}" class="nav-link" id="pills-profile-tab"  role="tab"
               aria-controls="pills-profile" aria-selected="true">Парсинг</a>
        </li>

        <li class="nav-item">
            <a th:href="@{/status}"  class="nav-link"   role="tab"
               aria-controls="pills-contact" aria-selected="true">Статус</a>
        </li>

        <li class="nav-item">
            <a th:href="@{/txn-info}"  class="nav-link"   role="tab"
               aria-controls="pills-contact" aria-selected="true">Инфо</a>
        </li>

        <li class="nav-item">
            <a th:href="@{/cash-in}"  class="nav-link"   role="tab"
               aria-controls="pills-contact" aria-selected="true">Cash</a>
        </li>

        <li class="nav-item">
            <a th:href="@{/register_page}"  class="nav-link"   role="tab"
               aria-controls="pills-contact" aria-selected="tru">Сравнение</a>
        </li>
    </ul>
</nav>

Answer 1

let nav = d.querySelector('.nav')
nav.addEventListener('click', activeTabs)
function activeTabs(e) {
let items = d.querySelectorAll('.nav-item')
const target = e.target 
if (target.classList.contains('nav-item') {
 target.classList.add('active');
}
items.forEach(item => {
item.classList.remove('active')
})
}