Псевдокласс :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 {
  
}

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

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