Необходимо реализовать перемещение между табами посредством нажатия на стрелки. При нажатии на таб открывается модальное окно с описанием, в этом же окне есть стрелки, нажимая на которые можно перемещаться на следующее окно. Хотелось реализовать такую логику, что при нажатии на таб открывается окно и ему присваивается класс актив, далее происходит проверка на наличие данного класса и, если такой класс имеется, то при нажатии на стрелку окно скрывается, класс актив удаляется и открывается следующее окно. Код работает неправильно: при первом заходе на страницу и нажатии на правую стрелку все три таба просматриваются, хотя классы присваиваются им криво (третьему не присваивается), а затем, если нажать на подложку и снова на первый таб, то при нажатии на стрелку происходит скачок с 1ого таба на 3ий (при этом у второго остается класс актив). Возможно, если прописать команду удаления класса актив, например, при нажатии на подложку и сокрытии всех окон, то все более-менее работало бы, но не получается этого сделать, класс актив так и остается.
let tabsBtn = document.querySelectorAll('.projects__tabs-item'),
tabsItem = document.querySelectorAll('.modals__cards-item'),
projectArrows = document.querySelector('.modals__slider-arrows'),
modalItem = document.querySelector('.modals');
tabsBtn.forEach(el => {
el.addEventListener('click', function(){
modalItem.style.display = 'flex';
document.body.style.overflow = 'hidden';
})
});
for (let i = 0; i < tabsBtn.length; i++) {
tabsBtn[i].addEventListener('click', function(){
tabsItem[i].style.display = 'block';
tabsItem[i].classList.add('modals-active');
for(let slideIndex = i; slideIndex < tabsItem.length - 1; slideIndex++){
projectArrows.addEventListener('click', function(){
if(tabsItem[slideIndex].classList.contains('modals-active')){
tabsItem[slideIndex].style.display = 'none';
tabsItem[slideIndex].classList.remove('modals-active');
tabsItem[slideIndex + 1].style.display = 'block';
}
tabsItem[slideIndex].classList.add('modals-active');
})
}
});
}
modalItem.addEventListener('click', function(e){
let target = e.target;
if(target.classList.contains('modals')){
tabsItem.forEach(el => {
el.style.display = 'none';
})
modalItem.style.display = 'none';
}
document.body.style.overflow = 'visible';
})
ps. весь код с html и css скинуть не получается, слишком много символов.
