Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.07.2022, 19:58
Новичок на форуме
Отправить личное сообщение для Dmytrio Посмотреть профиль Найти все сообщения от Dmytrio
 
Регистрация: 29.07.2022
Сообщений: 4

Как мне сделать, чтобы при нажатии на класс img активировался также класс btn !?
<!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>
Ответить с цитированием
  #2 (permalink)  
Старый 29.07.2022, 20:07
Новичок на форуме
Отправить личное сообщение для Dmytrio Посмотреть профиль Найти все сообщения от Dmytrio
 
Регистрация: 29.07.2022
Сообщений: 4

Помогите пожалуйста! Хочу сделать один проект, и для этого мне нужно написать сайт. Как понимаете - я новичек в написаниях сайтов.
Мне нужно чтобы, при нажатии какого-либо класса (CLOCK, WEATHER, CALENDAR) - активировались вложенные кнопки. Я имею ввиду, что "btn" и "img" должны быть одним целым, то есть при нажатии на класса "С1" активировалась и "С2" . Надеюсь, вы меня поняли. Помогите пж, я слишком тупой(
Ответить с цитированием
  #3 (permalink)  
Старый 29.07.2022, 20:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,602

делегирование
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 в 21:15.
Ответить с цитированием
  #4 (permalink)  
Старый 29.07.2022, 21:02
Новичок на форуме
Отправить личное сообщение для Dmytrio Посмотреть профиль Найти все сообщения от Dmytrio
 
Регистрация: 29.07.2022
Сообщений: 4

Спасибо огромное, что ответили. А как сделать, чтобы наоборот происходило
А как сделать так, чтобы при нажатии на "btn" активировалась "img".
Ответить с цитированием
  #5 (permalink)  
Старый 29.07.2022, 21:04
Новичок на форуме
Отправить личное сообщение для Dmytrio Посмотреть профиль Найти все сообщения от Dmytrio
 
Регистрация: 29.07.2022
Сообщений: 4

А все! Получилось! Спасибо огромное
Ответить с цитированием
  #6 (permalink)  
Старый 29.07.2022, 21:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,602

Dmytrio,
добавлено #3
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как написать скрипт, чтобы при нажатии на кнопку он скроллил на следующую или предыду Tempest Элементы интерфейса 8 05.07.2021 03:01
Как сделать так чтобы при клике на картинку она менялась на другую? Человедо Общие вопросы Javascript 3 02.07.2018 02:39
Как сделать плавный переход картинок при нажатии на стрелки Antonjrjr Элементы интерфейса 3 03.05.2017 11:30
Как сделать чтобы элемент появлялся при скроле страницы, у определенного класса. SnakeAce Общие вопросы Javascript 1 30.01.2013 13:32
Как сделать, чтобы при удалении div браузер не перепрыгивал наверх станицы EvgeniyRRU Events/DOM/Window 4 02.10.2011 12:42