Показать сообщение отдельно
  #5 (permalink)  
Старый 20.09.2023, 01:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от ixiz
ОДИН CSS класс .active. А мне нужно, чтобы У КАЖДОЙ ссылки было свое оформление.

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        [data-filter="red"].active {
            color: red;
        }

         [data-filter="green"].active {
            color: green;
        }

         [data-filter="blue"].active {
            color: blue;
        }

         [data-filter="gray"].active {
            color: gray;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const nav = document.querySelector('.nav-list');
            let active;
            nav.addEventListener('click', ({ target }) => {
                if (target = target.closest('[data-filter]')) {
                    if (active) {
                        active.classList.remove('active')
                    }
                    active = target;
                    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>
Ответить с цитированием