Как можно реализовать функционал переключения между табами при помощи кнопок-стрелок, с учётом открытого модального окна и присвоения классов? При нажатии на таб должно открываться модальное окно с описанием, в котором также находятся стрелки для навигации. Логика заключается в том, что при открытии окна к нему присваивается класс 'актив', и при наличии этого класса при нажатии на правую или левую стрелку модальное окно скрывается, класс 'актив' удаляется, и открывается следующее окно. Но в текущем коде возникает проблема: при первом нажатии на правую стрелку происходит просмотр всех трёх табов, несмотря на некорректное присвоение классов. При повторном нажатии на первый таб и затем на стрелку модальное окно перескакивает с первого таба на третий, при этом у второго таба остается класс 'актив'. Возможно, стоит добавить команду для удаления класса 'актив' при нажатии на подложку, чтобы решить эту проблему, однако это не получается реализовать. Как можно исправить данную логику?
```javascript
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');
```
Для реализации переключения между вкладками с помощью клавиш стрелок и исправления логики открытия и закрытия модальных окон, вам необходимо внести несколько изменений в ваш код. Основная идея заключается в следующем:
1. **Передача активного индекса**: Создать переменную для хранения текущего активного таба.
2. **Классы для модального окна**: Убедитесь, что классы добавляются и удаляются корректно при открытии/закрытии модальных окон.
3. **Слушатели событий на клавиши**: Добавить слушатели событий для кнопок со стрелками, которые будут переключать активный таб.
4. **Закрытие модального окна**: Нужно будет предусмотреть закрытие модального окна при нажатии на подложку.
Вот пример кода с этими изменениями:
```javascript
let tabsBtn = document.querySelectorAll('.projects__tabs-item'),
tabsItem = document.querySelectorAll('.modals__cards-item'),
projectArrows = document.querySelector('.modals__slider-arrows'),
modalItem = document.querySelector('.modals');
let currentIndex = 0; // Индекс текущего активного таба
// Функция для открытия модального окна
function openModal(index) {
modalItem.style.display = 'flex';
document.body.style.overflow = 'hidden';
// Скрыть все табы и убрать активный класс
for (let j = 0; j < tabsItem.length; j++) {
tabsItem[j].style.display = 'none';
tabsItem[j].classList.remove('modals-active');
}
// Показать выбранный таб и добавить активный класс
tabsItem[index].style.display = 'block';
tabsItem[index].classList.add('modals-active');
currentIndex = index; // Обновить текущий индекс
}
// Добавление слушателя на каждую кнопку таба
tabsBtn.forEach((el, index) => {
el.addEventListener('click', function() {
openModal(index);
});
});
// Обработчик клавиш
document.addEventListener('keydown', function(event) {
if (modalItem.style.display === 'flex') {
if (event.key === 'ArrowRight') {
// Переключение на вправо
currentIndex = (currentIndex + 1) % tabsBtn.length; // Обход по кругу
openModal(currentIndex);
} else if (event.key === 'ArrowLeft') {
// Переключение на влево
currentIndex = (currentIndex - 1 + tabsBtn.length) % tabsBtn.length; // Обход по кругу
openModal(currentIndex);
}
}
});
// Закрытие модального окна при клике на подложку
modalItem.addEventListener('click', function(event) {
if (event.target === modalItem) { // Закрыть, если клик по подложке
modalItem.style.display = 'none';
document.body.style.overflow = ''; // Вернуть возможность прокрутки
// Удалить активный класс для всех табов
for (let j = 0; j < tabsItem.length; j++) {
tabsItem[j].classList.remove('modals-active');
}
}
});
```
### Объяснение кода:
1. **`openModal(index)`**: Функция, которая отвечает за открытие модального окна и отображение соответствующего таба. Она скрывает все табы, убирает активные классы, а затем показывает только текущий таб и добавляет ему класс 'актив'.
2. **Добавление слушателя на клавиши**: Для нажатия стрелок «вправо» и «влево» добавляется обработчик события нажатия клавиш. Индекс текущего таба обновляется, и соответствующий таб открывается заново.
3. **Закрытие модального окна**: Реализована логика закрытия модального окна при клике на подложку, чтобы пользователю было удобно выходить из модального окна без нажатия на кнопку.
Этот подход должен устранить проблемы с некорректным переключением между табами и классовыми состояниями.