Ошибка в коде JS переключающем вкладки

@zaraizar · Регистрация: 26.02.2021

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

Привет!

Для страницы необходимо сделать вкладки. Своих знаний, чтобы сделать это мне не хватает пока, поэтому взял чужой код. В примере он работает.

Проблема: при клике на вкладку нужный див не показывается, ни диву в табом, ни диву с контентом не присваивается класс active.

В консоли дает ошибку: tab is not defined.

Пожалуйста, помогите найти ошибку! Заранее всем спасибо!

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div class="servicesTabs">
    <div class="tabs">
      <div class="tabItem">Wedding Planner</div>
      <div class="tabItem">Photographer</div>
      <div class="tabItem">Deejay</div>
      <div class="tabItem">Animations</div>
    </div>
    <div class="content">
      <div class="contentItem">
        <div class="subTitle"><h3>Wedding Planner</h3>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        </div>
        <div><img src="img/intro_01.jpg" class="image" alt=""></div>
      </div>
      <div class="contentItem">
        <div class="subTitle"><h3>Photographer</h3>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        </div>
        <div><img src="img/intro_02.jpg" class="image" alt=""></div>
      </div>
      <div class="contentItem">
        <div class="subTitle"><h3>Photographer</h3>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        </div>
        <div><img src="img/intro_02.jpg" class="image" alt=""></div>
      </div>
      <div class="contentItem">
        <div class="subTitle"><h3>Photographer</h3>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        <p>Lorem ipsum dolor sit amet, consectetur <span>adipiscing elit. Vivamus varius sodales purus ut tempus. Integer ac tempor est, sed ultricies dui.</p>
        </div>
        <div><img src="img/intro_02.jpg" class="image" alt=""></div>
      </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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
.services {
    max-width: 90%;
    margin: 0 auto 50px auto;
}
.servicesTabs {
    overflow: hidden;
}
 
.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
}
.tabItem {
    padding: 0 0 10px 0;
    font-family: "Jaapokkiregular", serif;
    font-size: 18px;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    flex-basis: 140px;
    text-align: center;
}
.tabItem:hover,
.tabItem.active {
    border-bottom: 1px solid red;
}
.content {
    margin-top: 30px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: start;
    height: 700PX;
    width: 100%;
}
.contentItem {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    width: 99.5%;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    padding-top: 10px;
    opacity: 0;
    transform: translateX(100px);
}
.contentItem.active {
    transition: all 250ms;
    opacity: 1;
    transform: translateX(0);
    position: static;
}
.subTitle {
    font-family: "Jaapokki regular", serf;
    font-size: 24px;
    margin: 0 auto;
}
.subTitle h3 {
    margin-bottom: 40px;
}
.subTitle p {
    font-size: 18px;
    text-align: left;
    margin-bottom: 30px;
}
.image {
    margin-top: -10px;
    width: calc(300px + (800 - 300) * ((100vw - 320px) / (1800 - 320)));
    height: 100%;
    object-fit: contain;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const tabs = document.querySelectorAll('.tabItem');
const contents = document.querySelectorAll('.contentItem');
 
tabs.forEach((tab, index) => {
    tab.onclick = () => {
        changeTab(index)
    };
});
 
function changeTab(index) {
    for (let tab of tabs) {
        tab.classList.remove('active');
    }
    tab[index].classList.add('active');
 
    for (let el of contents) {
        el.classList.remove('active');
    }
    contents[index].classList.add('active');
};

krvsa · 13.04.2023, 23:07

Заменить

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

JavaScript
1
tab[index].classList.add('active');

На

JavaScript
1
tabs[index].classList.add('active');

@zaraizar · 13.04.2023, 23:20 **[ТС]**

krvsa, спасибо!

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

@zaraizar 0 / 0 / 0 Регистрация: 26.02.2021 Сообщений: 67
	13.04.2023, 23:20 [ТС]
	krvsa, спасибо! 0

Ошибка в коде JS переключающем вкладки

Решение