При клике на блок с определенным цветом менялся цвет header который на блоке (Таких блоков 5)

@DenisKatsapov · Регистрация: 01.12.2019

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

при клике на блок с определенным цветом менялся цвет header который на блоке (Таких блоков 5)

@vburyagin · 30.03.2020, 23:41

Если использовать JQuery (а я настоятельно рекомендую эту библиотеку), то вот так:

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
.div1 {
background: red !important;
width: 100px;
height: 100px;
margin: 10px;
display: inline-block;
}
.div2 {
background: black !important;
width: 100px;
height: 100px;
margin: 10px;
display: inline-block;
}
.div3 {
background: green !important;
width: 100px;
height: 100px;
margin: 10px;
display: inline-block;
}
.div4 {
background: grey !important;
width: 100px;
height: 100px;
margin: 10px;
display: inline-block;
}
.div5 {
background: orange !important;
width: 100px;
height: 100px;
margin: 10px;
display: inline-block;
}
.header-a {
width: 100%;
height: 200px;
bottom: 0;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
  <meta name="viewport" content="width=device-width">
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
 
<!-- Далее разметка HEADER -->
<div class="header-a">
 
Здесь что-то...
 
</div>
</body>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('.div1').on('click', function(){
    $('.header-a').removeClass('div2 div3 div4 div5');
    $('.header-a').addClass('div1');
});
$('.div2').on('click', function(){
    $('.header-a').removeClass('div1 div3 div4 div5');
    $('.header-a').addClass('div2');
});
$('.div3').on('click', function(){
    $('.header-a').removeClass('div1 div2 div4 div5');
    $('.header-a').addClass('div3');
});
$('.div4').on('click', function(){
    $('.header-a').removeClass('div1 div2 div3 div5');
    $('.header-a').addClass('div4');
});
$('.div5').on('click', function(){
    $('.header-a').removeClass('div1 div2 div3 div4');
    $('.header-a').addClass('div5');
});

Код JS можно упростить с использованием THIS. Накидал, чтобы имели общее представление.

Так же учтите, что при динамически генерируемых элементах, последующее обращение к ним стоит делать через body, то есть так: $('body').on('click', 'div1', function() {});

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 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. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@DenisKatsapov 0 / 0 / 0 Регистрация: 01.12.2019 Сообщений: 14

	При клике на блок с определенным цветом менялся цвет header который на блоке (Таких блоков 5) 27.03.2020, 18:56. Показов 905. Ответов 1 Метки нет (Все метки) при клике на блок с определенным цветом менялся цвет header который на блоке (Таких блоков 5) 0