При нажатии на кнопку - удалить другой блок

Question

У меня есть кнопка1, кнопка2, кнопка3 при нажатии на кнопка1 появляется блок1, при нажатии на кнопка2 появляется блок2, мне нужно сделать что бы при нажатии на кнопка1 появляется блок1 и убирается блок2 (если он активен) и что бы при нажатии на кнопка2 появляется блок2 и убирается блок1 (если он активен) и при нажатии на кнопку 3 убирались все 2 блока :)

$('.btn1').click(function(){
$(".block1").fadeToggle(100);
});
$('.btn2').click(function(){
$(".block2").fadeToggle(100);
});

  .active {
    display: block;
  }
  .block1 {
    display: none;
  }
  .block2 {
    display: none;
  }

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button class="btn1" type="button" name="button">btn1</button>
  <button class="btn2" type="button" name="button">btn2</button>
  <button class="btn3" type="button" name="button">btn3</button>

  <div class="block1">hello</div>
  <div class="block2">buy</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>

Answer 1

Тут я сделал в javascript а не в jquery. Колхозный код ^-^

const btns = document.querySelectorAll(".btn");
const blocks = document.querySelectorAll(".block");

for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    for (let i = 0; i < btns.length; i++) {
      blocks[i].classList.remove("active");
      if (this == btns[i]) blocks[i].classList.add("active");
    }
  })
}

.block {
  display: none;
}

.active {
  display: block;
}

<button class="btn btn1">1</button>
<button class="btn btn2">2</button>
<button class="btn btn3">3</button>

<div class="block block1">Text 1</div>
<div class="block block2">Text 2</div>
<div class="block block3">Text 3</div>

БЛОГ НА HUSL

При нажатии на кнопку - удалить другой блок

Ответы (1 шт):