0

У меня есть кнопка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>

2
  • это называется tabs google.com/…
    – soledar10
    24 фев 2022 в 10:34
  • Установите блокам некий класс. При нажатии на любую кнопку вызывайте функцию, убирающую все элементы этого класса, если они активные. А если это кнопка 1 или 2 - потом показывайте соответствующий блок
    – Adm123
    25 фев 2022 в 4:24

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.