Как мне сделать, чтобы при нажатии на класс img активировался также класс btn !?
:help:
<!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>
|
Помогите пожалуйста! Хочу сделать один проект, и для этого мне нужно написать сайт. Как понимаете - я новичек в написаниях сайтов.
Мне нужно чтобы, при нажатии какого-либо класса (CLOCK, WEATHER, CALENDAR) - активировались вложенные кнопки. Я имею ввиду, что "btn" и "img" должны быть одним целым, то есть при нажатии на класса "С1" активировалась и "С2" . Надеюсь, вы меня поняли. Помогите пж, я слишком тупой( |
делегирование
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>
|
Спасибо огромное, что ответили. А как сделать, чтобы наоборот происходило
А как сделать так, чтобы при нажатии на "btn" активировалась "img".
|
А все! Получилось! Спасибо огромное
|
Dmytrio,
добавлено #3 |
| Часовой пояс GMT +3, время: 06:47. |