Как удалить класс при определенной ширине экрана?
Подскажите пожалуйста как удалить класс _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>