@mardari98

Как определить конкретный элемент списка (li)?

Есть список 'li'. Нужно сделать эффект при нажатии на элемент, который будет применяться к тому элементу, на который я нажал.

Лучше показать на примере:

Допустим, есть список:

<ul>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
</ul>


Как определить и применить стиль именно на тот элемент, на который я нажал? Например изменить цвет текста.
  • Вопрос задан
  • 340 просмотров
Решения вопроса 1
tuychin
@tuychin
Frontend dev
CSS
Срабатывает только в промежуток нажима по элементу
li:active {
    color: red;
}


Срабатывает, когда элемент (input формы в основном) получает фокус
по клику или TAB
li:focus {
    color: red;
}


JS
const list = document.querySelector('ul');

list.addEventListener('click', (event) => {
    event.target.style.color = 'red';
});


Или так:
(В этом случае, событие сработает и за пределами списка)
document.addEventListener('click', (event) => {
    event.target.style.color = 'red';
});


event - объект события
target - элемент, на который кликнули
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы