Проблема, с которой вы столкнулись, вызвана использованием querySelectorAll, которое не просто выбирает первый слой дочерних узлов, но детализирует его непосредственно в DOM и извлекает ВСЕ соответствующие узлы. Простое решение может заключаться в том, чтобы отличать дочерние вкладки от родительских вкладок, добавив атрибут для их дифференциации и используя отдельный обработчик для дочерних элементов. Более комплексный подход может включать в себя работу только с вкладками верхнего уровня и содержимым вкладок.
ссылка CodePen
(я добавил английские комментарии к коду и удалилчужие для удобства чтения другими пользователями)
'use strict';
document.addEventListener('DOMContentLoaded', function () {
var tabs = document.getElementsByClassName('tabs');
if (tabs) {
var _loop = function _loop() {
var tabListItems = tabs[i].querySelectorAll('li');
tabListItems.forEach(function (tabListItem) {
tabListItem.addEventListener('click', function (e) {
// Select any siblings of the current tab.
let siblings = Array.from(tabListItem.parentElement.children);
// Remove the is-active status from all siblings
siblings.forEach(function (element) {
element.classList.remove('is-active');
});
// Add the is-active status to the selected tab.
tabListItem.classList.add('is-active');
var tabName = tabListItem.dataset.tab;
// Same as above, rather than selecting all of the js-tab-content
// elements, we only select those which are at the same level as
// the selected tab.
let tabsContainer = tabListItem.closest('.js-tabs-container');
let tabsContainerChildren = Array.from(tabsContainer.children);
// Filter out other children that aren't js-tab-content elements.
let tabs = tabsContainerChildren.filter(function(el) {
return el.className.includes('js-tab-content')
});
tabs.forEach(function(tabContent) {
if (tabContent.id !== tabName) {
tabContent.classList.add('has-display-none');
} else {
tabContent.classList.remove('has-display-none');
}
})
}, false);
});
};
for (var i = 0; i < tabs.length; i++) {
_loop();
}
}
});
Если ваша структура в целом остается неизменной, это должно работать правильно для любого уровня вложенных вкладок, так как при выборе вкладки влияют только элементы - экраныи ссылки вокруг него.
Рефакторинг
Использование функций со стрелками и назначение меньшего числа переменных там, где они не нужны, позволят вам писать более короткий и лаконичный код. Вот пример, не обязательно оптимальный способ его написания, но он может дать вам некоторые идеи для извлечения функций и создания цепочек итераций массива.
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.getElementsByClassName('tabs')).forEach(tab => {
tab.querySelectorAll('li').forEach(listItem => {
listItem.addEventListener('click', tabClickHandler(listItem), false);
});
});
});
function tabClickHandler (listItem) {
return () => {
let siblings = Array.from(listItem.parentElement.children);
siblings.forEach(el => el.classList.remove('is-active'));
listItem.classList.add('is-active');
let tabName = listItem.dataset.tab;
Array.from(listItem.closest('.js-tabs-container').children)
.filter(el => el.classList.contains('js-tab-content'))
.forEach(tab => {
if (tab.id !== tabName) {
tab.classList.add('has-display-none');
} else {
tab.classList.remove('has-display-none');
}
});
}
}
Попробуйте здесь