Псевдокласс :active по нажатии кнопки

@vmiche · Регистрация: 28.10.2018

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

Друзья, всем привет!

Предупреждаю сразу, что в js я очень слаб, но проблему решить надо, большая часть решена, но вот случился затык)

Есть код в html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="calc-block_top">
                        <div class="calc-item">
                            <img loading="lazy" src="./img/new/vostochnie.jpg" alt="">
                            <div class="calc-item__title">Восточный</div>
                            </div>
                        
                        <div class="calc-item">
                            <img loading="lazy" src="./img/new/shale.jpg" alt="">
                            <div class="calc-item__title">Шале</div>
                        </div>
                        
                        <div class="calc-item">
                            <img loading="lazy" src="./img/new/modern.jpg" alt="">
                            <div class="calc-item__title">Модерн</div>
                        </div>
</div>

И есть js, который при нажатии на один из элементов calc-item дает ему псевдокласс :active и убирает его при повторном нажатии.

JavaScript
1
2
3
4
5
6
7
8
$('.calc-block-price .calc-item').click(function(){
        if($(this).hasClass('active')){
        $(this).removeClass('active')
    } else {
        $('.calc-item.active').removeClass('active')
        $(this).addClass('active')
    }
    })

Проблема в том, что помимо элемента calc-item надо что бы и у элемента calc-item__title проставлялся :active
Пробовал именно для calc-item__title делать отдельный кусок кода, но не вариант, так как должно это происходить при нажатии на calc-item

Т.е. мой скрипт надо поправить, что бы при нажатии на calc-item свойство :active давалось и calc-item и calc-item__titl одного блока.
Буду очень благодарен за помощь!

Добавлено через 2 часа 52 минуты
Погуглил, поправил на такое, не помогло =(

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$('.calc-block-price .calc-item').click(function(){
        if($(this).hasClass('active')){
        $(this).removeClass('active')
        $(this).find('calc-item__title.active').removeClass('active');
    } else {
        $('.calc-item.active').removeClass('active')
        $('calc-item__title.active').removeClass('active')
        $(this).addClass('active')
        $(this).find('calc-item__title.active').addClass('active');
    }
    })

@Balanaar · 16.01.2023, 10:47

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

есть js, который при нажатии на один из элементов calc-item дает ему псевдокласс :active

У вас тут добавляется не псевдокласс, а вполне себе конкретный класс. Вы не можете добавить псевдокласс элементу с помощью JS-кода.

CSS
1
.calc-item.active

и

CSS
1
.calc-item:active

- разные вещи.

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

помимо элемента calc-item надо что бы и у элемента calc-item__title проставлялся :active

Зачем? В CSS вы можете прописать так:

CSS
1
2
3
.calc-item.active .calc-item__title {
  /* Ваши стили */
}

@vmiche · 16.01.2023, 23:37 **[ТС]**

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

Зачем? В CSS вы можете прописать так:
CSSВыделить код
1
2
3
.calc-item.active .calc-item__title {
/* Ваши стили */
}

Не помогло, реакции со стороны блока = 0

@Balanaar · 17.01.2023, 10:10

vmiche, какая у вас задача? Назначить определённые стили дочернему элементу? Распишите поподробнее. Также приложите актуальный JS и CSS код

@vmiche · 17.01.2023, 23:40 **[ТС]**

Решено:

Заменил

HTML5
1
<div class="calc-item__title">Восточный</div>

на

HTML5
1
<p>Восточный</p>

А css стили прописал:

CSS
1
2
3
.calc-item.active p {
  
}

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений 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 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	17.01.2023, 10:10
	vmiche, какая у вас задача? Назначить определённые стили дочернему элементу? Распишите поподробнее. Также приложите актуальный JS и CSS код 1