Как исправить скрипт табов, чтобы работал таб в табе?

Question

[slagoris]

Здравствуйте. Есть давний рабочий скрипт табов, уже применен во многих местах проекта. Но возникла необходимость сделать таб в табе, но у меня почему-то не получается доработать, видимо что-то упускаю, т.к. опыта маловато. Буду признателен за помощь. Вроде бы просто, но не пойму где ошибаюсь.

<div class="tabs">
                                <div class="tabs__nav tabs-nav segment-controls">
                                    <div class="tabs-nav__item  btn-segment active" data-tab-name="tab-1">ТАБ 1</div>
                                    <div class="tabs-nav__item btn-segment" data-tab-name="tab-2">ТАБ 2</div>
                                    <div class="tabs-nav__item btn-segment" data-tab-name="tab-3">ТАБ 3</div>
                                </div>
                                <div class="tabs__content">
                                    <div class="tab active tab-1">КОНТЕНТ 1111</div>
                                    <div class="tab tab-2">КОНТЕНТ 2222</div>
                                    <div class="tab tab-3">КОНТЕНТ 3333</div>
                                </div>
                            </div>

let tab = function () {
        let tabName;
        let tabs = document.querySelectorAll('.tabs');

        tabs.forEach(item =>{
            let tabNav = item.querySelectorAll('.tabs-nav__item');
            let tabContent = item.querySelectorAll('.tab');
            tabNav.forEach(item => {
                item.addEventListener('click', selectTabNav )
            })

            function selectTabNav() {
                tabNav.forEach(item => {
                    item.classList.remove('active')
                });
                this.classList.add('active');
                tabName = this.getAttribute('data-tab-name');
                selectTabContent(tabName);
            }
            function selectTabContent(tabName) {
                tabContent.forEach(item=>{
                    item.classList.contains(tabName) ? item.classList.add('active') : item.classList.remove('active')
                })
            }
        })

     };
     tab();

Answer 1

[slagoris]

Странное дело, обычно такая помощь была, но в этот раз, видимо, не судьба.
Сам разобрался

let tab = function () {
        let tabNav = document.querySelectorAll('.tabs-nav__item');
        let tabContent;
        let tabName;

        tabNav.forEach(item => {
            item.addEventListener('click', selectTabNav )
        })

         function selectTabNav() {
            let navs = this.closest('.tabs-nav').querySelectorAll('.tabs-nav__item');
            tabContent = Array.from(this.closest('.tabs-nav').nextElementSibling.children)
            navs.forEach(item => {
                item.classList.remove('active')
            });
             this.classList.add('active');
             tabName = this.getAttribute('data-tab-name');
             selectTabContent();
         }
         function selectTabContent() {
            tabContent.forEach(item=>{
                item.classList.contains(tabName) ? item.classList.add('active') : item.classList.remove('active')
            })
         }
     };
     tab();

Answer 2

[Сергей delphinpro]

let tabNav = item.querySelectorAll('> .tabs__nav > .tabs-nav__item');
let tabContent = item.querySelectorAll('> .tabs__content > .tab');

Comments

[slagoris]

не, так не работает. По факту в этом решении он тоже самое, что и у меня пишет в переменную. Блин, наверное надо прокинуть индекс и уже по индексу работать...

[Сергей delphinpro]

slagoris,

[Сергей delphinpro]

Селектор неправильный. Но суть верная.