Есть функция переключения табов для медиа запроса, как ее переписать или какую функцию можно добавить в 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);
})();