@Emil7676

Как сделать чтобы при нажатии на один элемент, менялся другой при помощи js?

Как сделать так чтобы при нажатии на li.button, img1 пропадал, а img11 наоборот появлялся? Но при повторном нажатии на li.button он опять становился img1(это только если кликнув на li.button на другое место если кликнув чтобы не срабатывало) В JavaScript не очень понимаю, помогите пожалуйста, спасибо.

<li class="menu">      
          <ul>
		    <li class="button"><a href="#" class="box1"><img src="imeges/home1.png" class="img1"><img src="imeges/home2.png" class="img11">Главная</a></li>
            
          </ul>          
      </li>


.img1 {
    position: relative;
    float: left;
    padding-right: 10px;
    bottom: 5px;
}
li.button img.img11 {
    opacity: 0%;
    transition: 0.2s;
}
.img11 {
    right: 175px;
    position: relative;
    float: right;
    bottom: 5px;
}
  • Вопрос задан
  • 96 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Jirafek
В стилях сделай такой клас
.hide {
    display: none;
}

const button = document.querySelector('.button');
const img1 = document.querySelector('.img1');
const img11 = document.querySelector('.img11');
img11.classList.add('hide');
button.onClick = () => {
    img1.classList.toggle('hide');
    img11.classList.toggle('hide');
}
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы