Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 22.06.2020
Сообщений: 25
1

Как сделать событие что бы по клику добавлялся класс только одной вкладке ?

19.11.2020, 18:07. Просмотров 1032. Ответов 1
Метки нет (Все метки)


Как сделать событие что бы по клику добавлялся класс только одной вкладке ?
Не понимаю как обратится к contents.


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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <div id="parent">
        <div class="menu">
            <a href="" class="active">вкладка 1</a>
            <a href="">вкладка 2</a>
            <a href="">вкладка 3</a>
        </div>
        <div class="tabs">
            <div class="tab">
                текст вкладки 1
            </div>
            <div class="tab">
                текст вкладки 2
            </div>
            <div class="tab">
                текст вкладки 3
            </div>
        </div>
    </div>
</body>
 
<script src="script.js"></script>
 
</html>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.onload = () => {
    let menu = document.querySelector('.menu');
    let tabs = document.querySelector('.tabs');
 
    let links = Array.from(menu.children);
    let contents = Array.from(tabs.children);
 
    links.forEach((link, index) => {
 
        link.addEventListener('click', (event) => {
            event.preventDefault();
            link.classList.toggle('active');
            console.log(link.index);
 
        });
    });
}
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
19.11.2020, 18:07
Ответы с готовыми решениями:

Как сделать так, что бы каждую минуту добавлялся 1 в базу данных?
Как сделать так, что бы каждую минуту добавлялся 1 в базу данных? Подскажите самый легкий вариант..

Как по клику получить текст только одной конкретной строки?
Приветствую. Есть вот такое: &lt;div id=&quot;zayka&quot;&gt;&lt;/div&gt; var zayka =...

Событие только по первому клику
Всем привет. Ребят, возник такой вопрос: А как делают на часто посещаемых сайтах, к примеру, с...

Как сделать чтобы конопка работала не только по клику , но и по нажатию
Здравствуйте! Есть метод private void buttonOK_Click(object sender, EventArgs e) которые...

1
Модератор
2514 / 1484 / 450
Регистрация: 07.09.2019
Сообщений: 2,250
19.11.2020, 21:34 2
Лучший ответ Сообщение было отмечено gogolik как решение

Решение

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload = () => {
  let menu = document.querySelector(".menu");
  let tabs = document.querySelector(".tabs");
 
  let links = Array.from(menu.children);
  let contents = Array.from(tabs.children);
  menu.addEventListener("click", (event) => {
    event.preventDefault();
    const link = event.target.closest("a");
    if (!link) {
      return;
    }
    for (let a of links) {
      a.classList.remove("active");
    }
    link.classList.add("active");
    // выбираем нужную вкладку:
    const current = contents[links.indexOf(link)];
    //...
  });
};
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
19.11.2020, 21:34

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Сделать так что бы на событие mouseEnter реагировал только canvas, но не реагировали находящиеся в нем компонеты
вдруг &lt;Canvas.Triggers&gt; &lt;EventTrigger...

Сделать событие по клику колеса прокрутки мышки
Здравствуйте. Подскажите пожалуйста, как сделать событие именно на клик колеса мышки, а не...

Как сделать что бы имейдж перемещался по клику мыши?
Доброго времени суток! Помогите, мне надо сделать что бы Имейдж перемещался по форме в то место...

Как сделать чтобы событие Worksheet_Change срабатывало только при определенном условии?
а как сделать чтобы событие Worksheet_Change срабатывало только при определенном условии? Можно...

Как сделать слайдер WP только на одной странице?
В моей теме WP Awake плагин Revolution slider отображается на всех страницах. Мне надо только на...

Как сделать чтобы пользователь при регистрации добавлялся в определенную группу автоматически?
Здравствуйте. Подскажите пожалуйста такую вещь: Как мне сделать чтобы пользователь после...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.