Версия 15:40, 28 сентября 2023 | | Версия 15:53, 28 сентября 2023 |
Строка 1: | | Строка 1: |
| //Получение всех блоков с табами | | | //Получение всех блоков с табами |
? | var mbAll = document.querySelectorAll(".main-block"); | | + | var tlbAll = document.querySelectorAll(".main-tlb"); |
| //Выдаём каждому табу уникальный номер | | | //Выдаём каждому табу уникальный номер |
? | for (mb_i = 0; mb_i < mbAll.length; mb_i++) { | | + | for (mb_i = 0; mb_i < tlbAll.length; mb_i++) { |
? | mbAll[mb_i].setAttribute("maintabs-num", mb_i); | | + | tlbAll[mb_i].setAttribute("maintabs-num", mb_i); |
| //Получаем табы и листы на первом уровне вложенности | | | //Получаем табы и листы на первом уровне вложенности |
? | var tabAll = mbAll[mb_i].querySelectorAll('[maintabs-num="'+mb_i+'"] > .tab-block:nth-child(1n)'); | | + | var tabAll = tlbAll[mb_i].querySelectorAll( |
? | var listAll = mbAll[mb_i].querySelectorAll('[maintabs-num="'+mb_i+'"] > .list-block:nth-child(1n)'); | | + | '[maintabs-num="' + mb_i + '"] > .tab-item:nth-child(1n)' |
| | + | ); |
| | + | var listAll = tlbAll[mb_i].querySelectorAll( |
| | + | '[maintabs-num="' + mb_i + '"] > .list-item:nth-child(1n)' |
| | + | ); |
| //Даём каждому табу номер блока и номер таба | | | //Даём каждому табу номер блока и номер таба |
| for (tb_i = 0; tb_i < tabAll.length; tb_i++) { | | | for (tb_i = 0; tb_i < tabAll.length; tb_i++) { |
| tabAll[tb_i].setAttribute("maintabs-num", mb_i); | | | tabAll[tb_i].setAttribute("maintabs-num", mb_i); |
| tabAll[tb_i].setAttribute("tabtabs-num", tb_i); | | | tabAll[tb_i].setAttribute("tabtabs-num", tb_i); |
? | item = tabAll[tb_i]; | | + | var item = tabAll[tb_i]; |
? | item.addEventListener('click', | | + | item.addEventListener("click", function (event) { |
? | function (event) { | | + | tabFun = document.querySelectorAll(".tab-item"); |
? | tabFun = document.querySelectorAll(".tab-block"); | | + | listFun = document.querySelectorAll(".list-item"); |
? | listFun = document.querySelectorAll(".list-block"); | | + | eventMainAtr = event.target.getAttribute("maintabs-num"); |
? | eventMainAtr = event.target.getAttribute("maintabs-num"); | | + | eventTabAtr = event.target.getAttribute("tabtabs-num"); |
? | eventTabAtr = event.target.getAttribute("tabtabs-num"); | | + | for (mb_j = 0; mb_j < tabFun.length; mb_j++) { |
? | for (mb_j = 0; mb_j < tabFun.length; mb_j++) { | | + | if (tabFun[mb_j].getAttribute("maintabs-num") === eventMainAtr) { |
? | if (tabFun[mb_j].getAttribute("maintabs-num") === eventMainAtr) { | | + | tabFun[mb_j].classList.remove("t-active"); |
? | tabFun[mb_j].classList.remove('active'); | | + | |
? | } | | + | |
| } | | | } |
? | for (mb_j = 0; mb_j < listFun.length; mb_j++) { | | + | } |
? | if (listFun[mb_j].getAttribute("maintabs-num") === eventMainAtr) { | | + | for (mb_j = 0; mb_j < listFun.length; mb_j++) { |
? | listFun[mb_j].classList.remove('active'); | | + | if (listFun[mb_j].getAttribute("maintabs-num") === eventMainAtr) { |
? | } | | + | listFun[mb_j].classList.remove("l-active"); |
| } | | | } |
? | listTarget = document.querySelector('[maintabs-num="'+eventMainAtr+'"][listtabs-num="'+eventTabAtr+'"]'); | | + | } |
? | listTarget.classList.add('active'); | | + | listTarget = document.querySelector( |
? | event.target.classList.add('active'); | | + | '[maintabs-num="' + |
? | }) | | + | eventMainAtr + |
| | + | '"][listtabs-num="' + |
| | + | eventTabAtr + |
| | + | '"]' |
| | + | ); |
| | + | event.target.classList.add("t-active"); |
| | + | listTarget.classList.add("l-active"); |
| | + | }); |
| } | | | } |
? | //Даём каждому листу номер блока и номер листа | | |
| for (lb_i = 0; lb_i < listAll.length; lb_i++) { | | | for (lb_i = 0; lb_i < listAll.length; lb_i++) { |
| listAll[lb_i].setAttribute("maintabs-num", mb_i); | | | listAll[lb_i].setAttribute("maintabs-num", mb_i); |
Строка 39: | | Строка 47: |
| } | | | } |
| } | | | } |
? | var tabZero = document.querySelectorAll('.tab-block[tabtabs-num="'+0+'"]'); | | + | if (tlbAll.length > 0) { |
? | var listZero = document.querySelectorAll('.list-block[listtabs-num="'+0+'"]'); | | + | var tabZero = document.querySelectorAll('.tab-item[tabtabs-num="' + 0 + '"]'); |
? | for (tz_i = 0; tz_i < tabZero.length; tz_i++) { | | + | var listZero = document.querySelectorAll('.list-item[listtabs-num="' + 0 + '"]'); |
? | tabZero[tz_i].classList.add('active'); | | + | for (tz_i = 0; tz_i < tabZero.length; tz_i++) { |
? | } | | + | tabZero[tz_i].classList.add("t-active"); |
? | for (lz_i = 0; lz_i < listZero.length; lz_i++) { | | + | } |
? | listZero[lz_i].classList.add('active'); | | + | for (lz_i = 0; lz_i < listZero.length; lz_i++) { |
| | + | listZero[lz_i].classList.add("l-active"); |
| | + | } |
| } | | | } |