Как удалить класс при определенной ширине экрана?

Подскажите пожалуйста как удалить класс _tab-active после 992px (до 992px один таб по умолчанию всегда открыт)? В js я не силен. Спасибо https://jsfiddle.net/hgq914oe/24/

function tabs() {
const tabs = document.querySelectorAll('[data-tabs]');

if (tabs.length > 0) {
    tabs.forEach((tabsBlock, index) => {
        tabsBlock.classList.add('_tab-init');
        tabsBlock.setAttribute('data-tabs-index', index);
        tabsBlock.addEventListener("click", setTabsAction);
        initTabs(tabsBlock);
    });

    // Получение слойлеров с медиа запросами
    let mdQueriesArray = dataMediaQueries(tabs, "tabs");
    if (mdQueriesArray && mdQueriesArray.length) {
        mdQueriesArray.forEach(mdQueriesItem => {
            // Событие
            mdQueriesItem.matchMedia.addEventListener("change", function () {
                setTitlePosition(mdQueriesItem.itemsArray, mdQueriesItem.matchMedia);
            });
            setTitlePosition(mdQueriesItem.itemsArray, mdQueriesItem.matchMedia);
        });
    }
}
// Установка позиций заголовков
function setTitlePosition(tabsMediaArray, matchMedia) {
    tabsMediaArray.forEach(tabsMediaItem => {
        tabsMediaItem = tabsMediaItem.item;
        let tabsTitles = tabsMediaItem.querySelector('[data-tabs-titles]');
        let tabsTitleItems = tabsMediaItem.querySelectorAll('[data-tabs-title]');
        let tabsContent = tabsMediaItem.querySelector('[data-tabs-body]');
        let tabsContentItems = tabsMediaItem.querySelectorAll('[data-tabs-item]');
        tabsTitleItems = Array.from(tabsTitleItems).filter(item => item.closest('[data-tabs]') === tabsMediaItem);
        tabsContentItems = Array.from(tabsContentItems).filter(item => item.closest('[data-tabs]') === tabsMediaItem);
        tabsContentItems.forEach((tabsContentItem, index) => {
            if (matchMedia.matches) {
                tabsContent.append(tabsTitleItems[index]);
                tabsContent.append(tabsContentItem);
                tabsMediaItem.classList.add('_tab-spoller');
            } else {
                tabsTitles.append(tabsTitleItems[index]);
                tabsMediaItem.classList.remove('_tab-spoller');
            }
        });
    });
}
// Работа с контентом
function initTabs(tabsBlock) {
    let tabsTitles = tabsBlock.querySelectorAll('[data-tabs-titles]>*');
    let tabsContent = tabsBlock.querySelectorAll('[data-tabs-body]>*');
    const tabsBlockIndex = tabsBlock.dataset.tabsIndex;

    if (tabsContent.length) {
        tabsContent = Array.from(tabsContent).filter(item => item.closest('[data-tabs]') === tabsBlock);
        tabsTitles = Array.from(tabsTitles).filter(item => item.closest('[data-tabs]') === tabsBlock);
        tabsContent.forEach((tabsContentItem, index) => {
            tabsTitles[index].setAttribute('data-tabs-title', '');
            tabsContentItem.setAttribute('data-tabs-item', '');

            tabsContentItem.hidden = !tabsTitles[index].classList.contains('_tab-active');
        });
    } 
}
function setTabsStatus(tabsBlock) {
    let tabsTitles = tabsBlock.querySelectorAll('[data-tabs-title]');
    let tabsContent = tabsBlock.querySelectorAll('[data-tabs-item]');
    const tabsBlockIndex = tabsBlock.dataset.tabsIndex;
    function isTabsAnamate(tabsBlock) {
        if (tabsBlock.hasAttribute('data-tabs-animate')) {
            return tabsBlock.dataset.tabsAnimate > 0 ? Number(tabsBlock.dataset.tabsAnimate) : 500;
        }
    }
    const tabsBlockAnimate = isTabsAnamate(tabsBlock);
    if (tabsContent.length > 0) {
        const isHash = tabsBlock.hasAttribute('data-tabs-hash');
        tabsContent = Array.from(tabsContent).filter(item => item.closest('[data-tabs]') === tabsBlock);
        tabsTitles = Array.from(tabsTitles).filter(item => item.closest('[data-tabs]') === tabsBlock);
        tabsContent.forEach((tabsContentItem, index) => {
            if (tabsTitles[index].classList.contains('_tab-active')) {
                if (tabsBlockAnimate) {
                    _slideDown(tabsContentItem, tabsBlockAnimate);
                } else {
                    tabsContentItem.hidden = false;
                }
                if (isHash && !tabsContentItem.closest('.popup')) {
                    setHash(`tab-${tabsBlockIndex}-${index}`);
                }
            } else {
                if (tabsBlockAnimate) {
                    _slideUp(tabsContentItem, tabsBlockAnimate);
                } else {
                    tabsContentItem.hidden = true;
                }
            }
        });
    }
}
function setTabsAction(e) {
    const el = e.target;
    if (el.closest('[data-tabs-title]')) {
        const tabTitle = el.closest('[data-tabs-title]');
        const tabsBlock = tabTitle.closest('[data-tabs]');
        if (!tabTitle.classList.contains('_tab-active') && !tabsBlock.querySelector('._slide')) {
            let tabActiveTitle = tabsBlock.querySelectorAll('[data-tabs-title]._tab-active');
            tabActiveTitle.length ? tabActiveTitle = Array.from(tabActiveTitle).filter(item => item.closest('[data-tabs]') === tabsBlock) : null;
            tabActiveTitle.length ? tabActiveTitle[0].classList.remove('_tab-active') : null;
            tabTitle.classList.add('_tab-active');
            setTabsStatus(tabsBlock);
        }
        e.preventDefault();
    }
}
}

function dataMediaQueries(array, dataSetValue) {
// Получение объектов с медиа запросами
const media = Array.from(array).filter(function (item, index, self) {
    if (item.dataset[dataSetValue]) {
        return item.dataset[dataSetValue].split(",")[0];
    }
});
// Инициализация объектов с медиа запросами
if (media.length) {
    const breakpointsArray = [];
    media.forEach(item => {
        const params = item.dataset[dataSetValue];
        const breakpoint = {};
        const paramsArray = params.split(",");
        breakpoint.value = paramsArray[0];
        breakpoint.type = paramsArray[1] ? paramsArray[1].trim() : "max";
        breakpoint.item = item;
        breakpointsArray.push(breakpoint);
    });
    // Получаем уникальные брейкпоинты
    let mdQueries = breakpointsArray.map(function (item) {
        return '(' + item.type + "-width: " + item.value + "px)," + item.value + ',' + item.type;
    });
    mdQueries = uniqArray(mdQueries);
    const mdQueriesArray = [];

    if (mdQueries.length) {
        // Работаем с каждым брейкпоинтом
        mdQueries.forEach(breakpoint => {
            const paramsArray = breakpoint.split(",");
            const mediaBreakpoint = paramsArray[1];
            const mediaType = paramsArray[2];
            const matchMedia = window.matchMedia(paramsArray[0]);
            // Объекты с нужными условиями
            const itemsArray = breakpointsArray.filter(function (item) {
                if (item.value === mediaBreakpoint && item.type === mediaType) {
                    return true;
                }
            });
            mdQueriesArray.push({
                itemsArray,
                matchMedia
            })
        });
        return mdQueriesArray;
    }
}
}

 function uniqArray(array) {
return array.filter(function (item, index, self) {
    return self.indexOf(item) === index;
});
}
tabs();
.tabs__navigation {
    display: flex;
}
.tabs__title {
    border: 1px solid #eee;
    padding: rem(10) rem(15);
    border-radius: rem(5);
    
}
  .tabs__title._tab-active {
        border: 1px solid #000;
    }
.tabs__content {
    border: 1px solid #eee;
    padding: rem(10) rem(15);
    display: flex;
  flex-direction: column;
}
<div data-tabs="992" class="tabs">
  <nav data-tabs-titles class="tabs__navigation">
<button type="button" class="tabs__title _tab-active">Таб №1</button>
<button type="button" class="tabs__title">Таб №2</button>
<button type="button" class="tabs__title">Таб №3</button>
  </nav>
  <div data-tabs-body class="tabs__content">
<div class="tabs__body">
  Содержимое первого таба
</div>
<div class="tabs__body">
  Содержимое второго таба
</div>
<div class="tabs__body">
  Содержимое третьего таба
</div>
  </div>
</div>


Ответы (1 шт):

Автор решения: Toma

Просто уберите класс _tab-active у первого таба - ваш скрипт при клике добавляет этот класс к элементу для того, чтобы показать содержимое. Если добавить этот класс к любому из табов вручную, тогда его содержимое будет показываться.

<div data-tabs="1996" class="tabs">
  <nav data-tabs-titles class="tabs__navigation">
    <button type="button" class="tabs__title">Таб №1</button>
    <button type="button" class="tabs__title">Таб №2</button>
    <button type="button" class="tabs__title">Таб №3</button>
  </nav>
  <div data-tabs-body class="tabs__content">
    <div class="tabs__body">
      Содержимое первого таба
    </div>
    <div class="tabs__body">
      Содержимое второго таба
    </div>
    <div class="tabs__body">
      Содержимое третьего таба
    </div>
  </div>
</div>

→ Ссылка