Всех приветствую!
Есть меню
Структура dom:
<ul class="nav nav-pills mb-3 d-flex gap-5" id="pills-tab-s" role="tablist">
<li class="list-inline-item d-flex" role="presentation">
<div class="circle-tab"></div>
<div id="pills-tab-1" class="active" data-bs-toggle="pill" data-bs-target="#pills-1" type="button" role="tab" aria-controls="pills-1" aria-selected="true">Бетон</div>
</li>
<li class="list-inline-item d-flex" role="presentation">
<div class="circle-tab"></div>
<div id="pills-tab-2" class="active" data-bs-toggle="pill" data-bs-target="#pills-1" type="button" role="tab" aria-controls="pills-1" aria-selected="true">Раствор</div>
</li>
</ul>
Можно ли как то реализовать перемещение по пунктам при клике.
let tabLi = document.body.querySelectorAll('[id^="pills-tab"]');
let FirstElem = document.body.querySelectorAll('.circle-tab');
for (let i = 0; i < tabLi.length; i++) {
if(tabLi[i].classList.contains("active")){
for(let li = 0; li < FirstElem.length; i++){
FirstElem[i].classList.add("litab");
tabLi[i].onclick = (e) => liTabActive(e);
function liTabActive(event){
$(event.target).closest('.list-inline-item').find('.circle-tab').addClass("litab");
}
}
} else{
FirstElem[i].classList.remove("litab");
}
}
Попробовал сам сделать маркеры поставить не получается.
Прошу не ругать я только учусь и поэтому ошибок куча.
