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

делегирование
Dmytrio,
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial;
        }
        .indicators button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
            color: grey;
        }
        .CLOCK:hover .C1 button {
            color: black;
            transform: scale(1.1);
            transition: 0.5s ease-in;
        }
        .CLOCK:hover .C2 button {
            color: grey;
            border-bottom: 0.2rem solid;
        }
        .WEATHER:hover .W1 button {
            color: black;
            transform: scale(1.1);
            transition: 0.5s ease-in;
        }
        .WEATHER:hover .W2 button {
            color: grey;
            border-bottom: 0.2rem solid;
        }
        .CALENDAR:hover .CA1 button {
            color: black;
            transform: scale(1.1);
            transition: 0.5s ease-in;
        }
        .CALENDAR:hover .CA2 button {
            color: grey;
            border-bottom: 0.2rem solid;
        }
        .CLOCK .C1 button.actives {
            color: green;
            transform: none;
            transition: none;
        }
        .CLOCK .C2 button.active {
            color: green;
            border-bottom: 0.2rem solid;
        }
        .WEATHER .W1 button.actives {
            color: blue;
            transform: none;
            transition: none;
        }
        .WEATHER .W2 button.active {
            color: blue;
            border-bottom: 0.2rem solid;
        }
        .CALENDAR .CA1 button.actives {
            color: red;
            transform: none;
            transition: none;
        }
        .CALENDAR .CA2 button.active {
            color: red;
            border-bottom: 0.2rem solid;
        }
    </style>
</head>
<body>
    <div class="indicators" id="navbar">
        <div class="CLOCK">
            <div class="C1"> <button class="img actives">LOGO1</button> </div>
            <div class="C2"> <button class="btn active">CLOCK</button> </div>
        </div>
        <div class="WEATHER">
            <div class="W1"> <button class="img">LOGO2</button> </div>
            <div class="W2"> <button class="btn">WEATHER</button> </div>
        </div>
        <div class="CALENDAR">
            <div class="CA1"> <button class="img">LOGO3</button> </div>
            <div class="CA2"> <button class="btn">CALENDAR</button> </div>
        </div>
    </div>
    <script>
        let btnContainer = document.getElementById("navbar"),
            btn = btnContainer.querySelector('.active'),
            img = btnContainer.querySelector('.actives');
        btnContainer.addEventListener('click', function({
            target
        }) {
            if (target = target.closest('.img, .btn') ) {
                target = target.closest('.indicators > div');
                img.classList.remove("actives");
                img = target.querySelector('.img');
                img.classList.add("actives");

                btn.classList.remove("active");
                btn = target.querySelector('.btn');
                btn.classList.add("active");
            }

        })
    </script>
</body>
</html>

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