Табы на нативном JS

@malafala · Регистрация: 31.12.2015

Студворк — интернет-сервис помощи студентам

Сами по себе табы работают, но существует проблема при работе вложенных табов. Самый нижний уровень работает, а вот те что выше нет, кроме того которому принадлежит активный класс. Опробовать в действии можно тут: https://jsfiddle.net/jmy8x8kw/1/
Дело в том что при получении узла .tabcon в переменную записывается кроме вложенных в него детей еще и те что на уровень ниже и из-за этого все не работает, а как изолировать ума не приложу, если кто-то посоветует что дельное пишите пожалуйста.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="tab">
        <ul class="tabnav">
            <li class="act">Закладка - 1</li>
            <li>Закладка - 2</li>
            <li>Закладка - 3</li>
        </ul>
        <div class="tabcon">
            <div class="act">
                Текстовое поле - 1
                <div class="tab">
                    <ul class="tabnav">
                        <li class="act">Закладка - 11</li>
                        <li>Закладка - 22</li>
                        <li>Закладка - 33</li>
                    </ul>
                    <div class="tabcon">
                        <div class="act">Текстовое поле - 11</div>
                        <div>Текстовое поле - 22</div>
                        <div>Текстовое поле - 33</div>
                    </div>
                </div>
            </div>
            <div>Текстовое поле - 2</div>
            <div>Текстовое поле - 3</div>
        <div>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.tab {width: 100%;}
    .tabnav {
        list-style: none;
        padding: 0;
        margin-bottom:5px;
    }
    .tabnav::after {
        content: '.';
        display: block;
        height: 0;
        clear: both;
        visibility:hidden;
    }
    .tabnav li {
        display: block;
        box-sizing: border-box;
        background: #ffffff;
        padding:3px 15px;
        border:1px solid black;
        margin-right: 5px;
        float: left;
        cursor: pointer;
    }
    .tabnav li:last-child {margin-right: 0;}
    .tabcon>div {
        box-sizing: border-box;
        border:1px solid black;
        background: lightyellow;
        padding: 10px;
        height: auto;
        overflow: hidden;
        display: none;
    }
    li.act {background: lightgreen;}
    div.act{display: block;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload = function () {
var tab = document.querySelectorAll('.tab');
    tab.forEach(function (lv1) {
    var menu = lv1.querySelector('.tabnav').querySelectorAll('li'),
        cont = lv1.querySelector('.tabcon').querySelectorAll('.tabcon:first-child');
    console.log(cont);
    menu.forEach(function (lv2, i) {
        lv2.addEventListener('click', function () {
        menu.forEach(function (lv3) {
            lv3.classList.remove('act');
        });
        lv2.classList.add('act');
        cont.forEach(function (lv4) {
            lv4.classList.remove('act');
        });
        cont[i].classList.add('act');
    });
  });
});
};

@Fedor Vlasenko · 22.10.2016, 21:53

Написал реализацию табов с данной разметкой никак руки не доходят выложить

HTML5
1
2
3
4
<tabs>
    <title>My tab</title>
    <description>My text</description>
</tabs>

По вашей тематике
Вот моя наработки реализации табов и вкладок
Табы на js
Табы на Jquery
Табы css
Спойлер css

@t1m0n · 24.10.2016, 20:11

Сообщение от Fedor Vlasenko

Табы css

это аккордеон

типа bootstrap accordion

@Fedor Vlasenko · 24.10.2016, 21:26

Сообщение от t1m0n

это аккордеон

частный случай табов

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .