@PlasterTom

Как настроить addListener?

Есть функция переключения табов для медиа запроса, как ее переписать или какую функцию можно добавить в addListener?

Проблемы:
При ширине меньше 801px должно быть видно содержание только одного таба. При большем - всех трех.
Сейчаc, если 1) убрать addListener:
и если ширина меньше 801 и кликнуть по табу, а потом расширить окно, то остается виден только один таб. (В цсс написано, что стандартно видно должно быть все, не понимаю, почему браузером это не отслеживается автоматически).
2) если использовать
mq.addListener(switchVariant);
    switchVariant(mq);

тогда при сужении окна (меньше 801) пропадает все содержимое табов. Оно и понятно, в коде это написано, но не знаю, как написать иначе.
3) Пробовала добавлять дополнительную функцию именно для отслеживания ширины, а switchWariant() только по кликам отслеживать, но они начинают конфликтовать. Табы вообще перестают работать.

(function () {
    var selector = '.varmenu';
    var elems = document.querySelectorAll(selector);
    var mq = window.matchMedia("(max-width: 801px)");
    mq.addListener(switchVariant);
    switchVariant(mq);
    
    function widthChange () {
          }
    
     function switchVariant() {
         if (mq.matches) {
            event.preventDefault();
            var x = document.getElementsByClassName("variant__target");
            var i;
            for (i = 0; i < x.length; i++) {
                x[i].style.display = 'none';
            }

            for (var i = 0; i < elems.length; i++)
                elems[i].classList.remove('varmenu_active');
            this.classList.add("varmenu_active");
            var variantActive = this.getAttribute('href').substr(1);
            document.getElementById(variantActive).style.display = 'block';
    }
         else {
              var x = document.getElementsByClassName("variant__target");
            var i;
            for (i = 0; i < x.length; i++) {
                x[i].style.display = 'block';
            }
         }
    }

       for (var i = 0; i < elems.length; i++)
        elems[i].addEventListener('click', switchVariant);

})();
  • Вопрос задан
  • 170 просмотров
Пригласить эксперта
Ответы на вопрос 1
@AnneSmith
самая ленивая
такие вещи делаются в css
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы