Форум

Dmytrio · #1 (**permalink**) 29.07.2022, 18:58

<!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>
<script>

    var btnContainer = document.getElementById("navbar");
    var btns = btnContainer.getElementsByClassName("btn");
    var imgs = btnContainer.getElementsByClassName("img");

    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function nt() {
            var current = document.getElementsByClassName("active");
            current[0].className = current[0].className.replace(" active");
            this.className += " active";
        })
        imgs[i].addEventListener('click', function mb() {
           var current = document.getElementsByClassName("actives");
           current[0].className = current[0].className.replace(" actives");
          this.className += " actives";
      })
    } 

</script>
</body>
</html>

Dmytrio · #2 (**permalink**) 29.07.2022, 19:07

Помогите пожалуйста! Хочу сделать один проект, и для этого мне нужно написать сайт. Как понимаете - я новичек в написаниях сайтов.
Мне нужно чтобы, при нажатии какого-либо класса (CLOCK, WEATHER, CALENDAR) - активировались вложенные кнопки. Я имею ввиду, что "btn" и "img" должны быть одним целым, то есть при нажатии на класса "С1" активировалась и "С2" . Надеюсь, вы меня поняли. Помогите пж, я слишком тупой(

рони · #3 (**permalink**) 29.07.2022, 19:39

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>

Dmytrio · #4 (**permalink**) 29.07.2022, 20:02

А как сделать так, чтобы при нажатии на "btn" активировалась "img".

Dmytrio · #5 (**permalink**) 29.07.2022, 20:04

А все! Получилось! Спасибо огромное

рони · #6 (**permalink**) 29.07.2022, 20:14

Dmytrio,
добавлено #3

Форум

Справочник

Discord чат

Курсы javascript