скрипт табов вебфлоу intersection

// Выполняем функции после загрузки DOM-контента
document.addEventListener('DOMContentLoaded', function() {
    // Функция для обработки кликов по элементам вкладок
    function handleStepTabLinks() {
        // Устанавливаем обработчик клика на элементы вкладок
        $('.step-tabs-menu .step-tab-link').on('click', function(event) {
            // Предотвращаем переход по ссылке
            event.preventDefault();
            let $this = $(this);
            // Здесь можно добавить действия, которые нужно выполнить при клике
        });
    }

    // Функция для автоматического переключения вкладок
    function clickStepTabLinks() {
        // Устанавливаем начальный индекс
        var currentIndex = 1;
        // Создаем объект MediaQueryList для отслеживания разрешения экрана
        var mediaQuery = window.matchMedia('(max-width: 991px)');
        var elem = document.querySelector('.hero-search-input');

        // Функция для клика по текущему элементу и перехода к следующему
        function clickNext() {
            // Проверяем, отображается ли элемент с классом 'nav-menu-wrap' и совпадает ли с медиа-запросом
            if (mediaQuery.matches && $('.nav-menu-wrap').css('display') === 'block') {
                // Если разрешение экрана 991px или меньше и 'nav-menu-wrap' отображается, останавливаем выполнение
                return;
            }
            // Если элемент '.hero-search-input' в фокусе, останавливаем выполнение
            if (elem === document.activeElement) {
                return;
            }
            // Кликаем по текущему элементу вкладки
            $('.step-tabs-menu .step-tab-link').eq(currentIndex).click();
            // Увеличиваем индекс или сбрасываем его, если он превышает количество элементов
            currentIndex = (currentIndex + 1) % $('.step-tabs-menu .step-tab-link').length;
        }

        // Запускаем функцию clickNext с интервалом в 5 секунд
        setInterval(clickNext, 5000);
    }

    // Создаем Intersection Observer
    let observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
            // Проверяем, является ли элемент видимым
            if (entry.isIntersecting) {
                // Если блок с классом 'steps' появился в области видимости, запускаем clickStepTabLinks
                clickStepTabLinks();
                // Отключаем наблюдатель после запуска функции, чтобы избежать повторных запусков
                observer.disconnect();
            }
        });
    });

    // Наблюдаем за блоком с классом 'steps'
    let stepsElement = document.querySelector('.steps');
    if (stepsElement) {
        observer.observe(stepsElement);
    }

    // Вызываем функцию для обработки кликов по вкладкам при загрузке страницы
    handleStepTabLinks();
});