Участник:_DiWoD_:ru/common.js — различия между версиями
Версия 05:47, 18 сентября 2023 Убрано, перенесено в основное | Версия 15:17, 28 сентября 2023 | |||
Строка 1: | Строка 1: | |||
? | + | //Получение всех блоков с табами | ||
+ | var mbAll = document.querySelectorAll(".main-block") | |||
+ | //Выдаём каждому табу уникальный номер | |||
+ | for (mb_i = 0; mb_i < mbAll.length; mb_i++) { | |||
+ | mbAll[mb_i].setAttribute("maintabs-num", mb_i); | |||
+ | //Получаем табы и листы на первом уровне вложенности | |||
+ | var tabAll = mbAll[mb_i].querySelectorAll(`[maintabs-num="${mb_i}"] > .tab-block:nth-child(1n)`); | |||
+ | var listAll = mbAll[mb_i].querySelectorAll(`[maintabs-num="${mb_i}"] > .list-block:nth-child(1n)`); | |||
+ | //Даём каждому табу номер блока и номер таба | |||
+ | for (tb_i = 0; tb_i < tabAll.length; tb_i++) { | |||
+ | tabAll[tb_i].setAttribute("maintabs-num", mb_i); | |||
+ | tabAll[tb_i].setAttribute("tabtabs-num", tb_i); | |||
+ | item = tabAll[tb_i]; | |||
+ | item.addEventListener('click', | |||
+ | function (event) { | |||
+ | tabFun = document.querySelectorAll(".tab-block"); | |||
+ | listFun = document.querySelectorAll(".list-block"); | |||
+ | eventMainAtr = event.target.getAttribute("maintabs-num"); | |||
+ | eventTabAtr = event.target.getAttribute("tabtabs-num"); | |||
+ | for (mb_j = 0; mb_j < tabFun.length; mb_j++) { | |||
+ | if (tabFun[mb_j].getAttribute("maintabs-num") === eventMainAtr) { | |||
+ | tabFun[mb_j].classList.remove('active'); | |||
+ | } | |||
+ | } | |||
+ | for (mb_j = 0; mb_j < listFun.length; mb_j++) { | |||
+ | if (listFun[mb_j].getAttribute("maintabs-num") === eventMainAtr) { | |||
+ | listFun[mb_j].classList.remove('active'); | |||
+ | } | |||
+ | } | |||
+ | listTarget = document.querySelector(`[maintabs-num="${eventMainAtr}"][listtabs-num="${eventTabAtr}"]`); | |||
+ | console.log(listTarget); | |||
+ | listTarget.classList.add('active'); | |||
+ | event.target.classList.add('active'); | |||
+ | }) | |||
+ | } | |||
+ | //Даём каждому листу номер блока и номер листа | |||
+ | for (lb_i = 0; lb_i < listAll.length; lb_i++) { | |||
+ | listAll[lb_i].setAttribute("maintabs-num", mb_i); | |||
+ | listAll[lb_i].setAttribute("listtabs-num", lb_i); | |||
+ | } | |||
+ | } |
Версия 15:17, 28 сентября 2023
//Получение всех блоков с табами var mbAll = document.querySelectorAll(".main-block") //Выдаём каждому табу уникальный номер for (mb_i = 0; mb_i < mbAll.length; mb_i++) { mbAll[mb_i].setAttribute("maintabs-num", mb_i); //Получаем табы и листы на первом уровне вложенности var tabAll = mbAll[mb_i].querySelectorAll(`[maintabs-num="${mb_i}"] > .tab-block:nth-child(1n)`); var listAll = mbAll[mb_i].querySelectorAll(`[maintabs-num="${mb_i}"] > .list-block:nth-child(1n)`); //Даём каждому табу номер блока и номер таба for (tb_i = 0; tb_i < tabAll.length; tb_i++) { tabAll[tb_i].setAttribute("maintabs-num", mb_i); tabAll[tb_i].setAttribute("tabtabs-num", tb_i); item = tabAll[tb_i]; item.addEventListener('click', function (event) { tabFun = document.querySelectorAll(".tab-block"); listFun = document.querySelectorAll(".list-block"); eventMainAtr = event.target.getAttribute("maintabs-num"); eventTabAtr = event.target.getAttribute("tabtabs-num"); for (mb_j = 0; mb_j < tabFun.length; mb_j++) { if (tabFun[mb_j].getAttribute("maintabs-num") === eventMainAtr) { tabFun[mb_j].classList.remove('active'); } } for (mb_j = 0; mb_j < listFun.length; mb_j++) { if (listFun[mb_j].getAttribute("maintabs-num") === eventMainAtr) { listFun[mb_j].classList.remove('active'); } } listTarget = document.querySelector(`[maintabs-num="${eventMainAtr}"][listtabs-num="${eventTabAtr}"]`); console.log(listTarget); listTarget.classList.add('active'); event.target.classList.add('active'); }) } //Даём каждому листу номер блока и номер листа for (lb_i = 0; lb_i < listAll.length; lb_i++) { listAll[lb_i].setAttribute("maintabs-num", mb_i); listAll[lb_i].setAttribute("listtabs-num", lb_i); } }