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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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