Показать сообщение отдельно
  #6 (permalink)  
Старый 20.09.2023, 08:08
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,698

Можно меньше CSS
<!DOCTYPE HTML>
<html>
 
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        [data-filter].active {
            color: var(--link-color);
        }
 
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const nav = document.querySelector('.nav-list');
            let active;
            nav.addEventListener('click', ({ target }) => {
                if (target = target.closest('[data-filter]')) {
                    active?.classList.remove('active')
                    active = target;
                    active.style.setProperty('--link-color', active.dataset.filter);
                    active.classList.add('active')
                }
            })
        })
    </script>
</head>
 
<body>
    <ul class="nav-list">
        <li data-filter="red" class="nav-list__item" id="red">Красный</li>
        <li data-filter="green" class="nav-list__item" id="green">Зеленый</li>
        <li data-filter="blue" class="nav-list__item" id="blue">Синий</li>
        <li data-filter="gray" class="nav-list__item" id="gray">Сброс</li>
    </ul>
</body>
 
</html>

Последний раз редактировалось voraa, 20.09.2023 в 11:15.
Ответить с цитированием