在单击不同按钮时显示和隐藏不同的div。

Question

我试图显示和隐藏不同的div在点击不同的按钮。例如，当我单击"1“按钮时，它会显示带有id=”块-1“的块。当我单击"4“按钮时，带有id=”块-4“的块显示，而前面的块#块-1隐藏。我尝试使用不同的ID，因为我不知道有任何其他解决方案来显示具有不同内容的块。不幸的是，我的当前代码不能正常工作:它切换正确的类以显示div，但一旦单击带有数字的按钮，我就无法隐藏以前的div或更改块。在默认状态下，当加载页面时，第一个块(#块-1)应该总是可见的。下面是代码与结果的链接：https://codepen.io/tomavl/pen/vYRLJVY

<div class="filter">
  <button class="filter-btn active" id="1">1</button>
  <button class="filter-btn" id="2">2</button>
  <button class="filter-btn" id="3">3</button>
  <button class="filter-btn" id="4">4</button>
</div>

<div class="block">
  <div class="block-1 block-card active" id="block-1">Block 1</div>
  <div class="block-2 block-card" id="block-2">Block 2</div>
  <div class="block-3 block-card" id="block-3">Block 3</div>
  <div class="block-4 block-card" id="block-4">Block 4</div>
</div>

  background-color: red;
  color: white;
}

.block-card {
  display: none;
}

.block-card.active {
  display: block;
}

var filterBtn = document.querySelectorAll(".filter-btn");
for (var i = 0; i < filterBtn.length; i++) {
  filterBtn[i].onclick = function () {
    if (this.classList) {
      for (var j = 0; j < filterBtn.length; j++) {
        filterBtn[j].classList.remove("active");
      }
      this.classList.add("active");
    } else {
      this.active += " " + active;
    }
  };
}

$("#2").on("click", function (e) {
  e.stopImmediatePropagation();
  if ($(this).hasClass("active")) {
    $(".block-2").addClass("active");
  } else {
    $(".block-2").removeClass("active");
  }
});

$("#3").on("click", function (e) {
  e.stopImmediatePropagation();
  if ($(this).hasClass("active")) {
    $(".block-3").addClass("active");
  } else {
    $(".block-3").removeClass("active");
  }
});

$("#4").on("click", function (e) {
  e.stopImmediatePropagation();
  if ($(this).hasClass("active")) {
    $(".block-4").addClass("active");
  } else {
    $(".block-4").removeClass("active");
  }
});

Answer 1

通过使用公共类按行为对内容进行分组，您可以使用更少的代码来实现所需的内容。您可以在需要的地方使用data属性在元素中存储自定义元数据。

在下面的示例中，所有按钮都使用相同的事件处理程序。差异只是来自用于更改选择器的按钮上的data属性。在将active类应用于目标之前，代码只是从所有相关元素中删除它。

​

let $blocks = $('.block-card');

$('.filter-btn').on('click', e => {
  let $btn = $(e.target).addClass('active');
  $btn.siblings().removeClass('active');
  
  let selector = $btn.data('target');
  $blocks.removeClass('active').filter(selector).addClass('active');
});

body {
  background-color: red;
  color: white;
}

.block-card {
  display: none;
}

.block-card.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="filter">
  <button class="filter-btn active" data-target="#block-1">1</button>
  <button class="filter-btn" data-target="#block-2">2</button>
  <button class="filter-btn" data-target="#block-3">3</button>
  <button class="filter-btn" data-target="#block-4">4</button>
</div>

<div class="block">
  <div class="block-card active" id="block-1">Block 1</div>
  <div class="block-card" id="block-2">Block 2</div>
  <div class="block-card" id="block-3">Block 3</div>
  <div class="block-card" id="block-4">Block 4</div>
</div>

​