@mardari98

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

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

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

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

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


Как определить и применить стиль именно на тот элемент, на который я нажал? Например изменить цвет текста.
  • Вопрос задан
  • 131 просмотр
Решения вопроса 2
tuychin
@tuychin
Приятный молодой человек
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 - элемент, на который кликнули
Ответ написан
sniggering_deus
@sniggering_deus
Frontend Engineer & Fullstack Designer
Первый вариант:



Активный класс добавляется элементу по которому кликнули.

<ul class="menu">
    <li class="menu__item">текст</li>
    <li class="menu__item">текст</li>
    <li class="menu__item">текст</li>
</ul>


.menu__item__active {
  color: red;
}

.menu__item {
  font-size: 25px;
}


const menu_items = document.querySelectorAll('.menu__item');
menu_items.forEach(item => {
item.addEventListener('click', (e) => {
const active_item = document.querySelectorAll('.menu__item');
active_item.forEach(n => n !== item ? n.classList.remove('menu__item__active') : null);
    item.classList.toggle('menu__item__active');
  });
});


Второй вариант:



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

<ul class="menu">
<li class="menu__item"><span class="menu__snake">Текст</span></li>
<li class="menu__item"><span class="menu__snake">Текст</span></li>
<li class="menu__item"><span class="menu__snake">Текст</span></li>
</ul>


.menu__item {
font-size: 22px;
user-select: none;
background-color: #3F51B5;
display: inline-block;
padding: 5px 20px;
margin: 10px;
border-radius: 5px;
}

.menu__item__active {
background: pink;
}

.menu__snake {
color: white;
}

.menu__snake__active {
color: black;
}


const $menu_items = document.querySelectorAll('.menu__item');

$menu_items.forEach($menu_item => {
const $menu_snake = $menu_item.querySelector('.menu__snake');    

$menu_item.addEventListener('click', (e) => {
const $active_item = document.querySelectorAll('.menu__item');
const $active_snake = document.querySelectorAll('.menu__snake'); 

$active_snake.forEach(s => s !== $menu_snake ? s.classList.remove('menu__snake__active') : null);
$active_item.forEach(n => n !== $menu_item ? n.classList.remove('menu__item__active') : null); 

$menu_snake.classList.toggle('menu__snake__active');
$menu_item.classList.toggle('menu__item__active');
});
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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