javascript - 隐藏其类与单击的按钮不匹配的 div 的按钮菜单

Question

我正在制作一个按钮菜单，该菜单隐藏其类与所单击按钮的类不匹配的 div。单击时的每个按钮应仅显示具有相同类的 div。我真的很困惑如何使用 Javascript 执行此操作，我希望有人能够帮助我吗？

提前致谢!

function sortTab(tabClass) {
  
}

.curtain {
  width: 100px;
  height: 100px;
  background: black;
  margin: 10px;
  color: white;
  float: left;
}

<button id="moon" onclick="sortTab(this.class)">moon</button>
<button id="earth" onclick="sortTab(this.class)">earth</button>
<button id="saturn" onclick="sortTab(this.class)">saturn</button>
<button id="mercury" onclick="sortTab(this.class)">mercury</button>
<button id="neptune" onclick="sortTab(this.class)">neptune</button>
<button id="sun" onclick="sortTab(this.class)">sun</button>
<button id="jupiter" onclick="sortTab(this.class)">jujpiter</button>

<div id="instafeed" class="gallery-wrap">
  <div class="moon earth curtain"></div>
  <div class="saturn curtain"></div>
  <div class="mercury sun curtain"></div>
  <div class="neptune curtain"></div>
  <div class="jupiter curtain"></div>
</div>

Answer 1

首先，不能为多个元素分配 ID。将值传递给您的函数以实现您想要的。

function sortTab(btnId) {
  var elements = document.getElementsByClassName('box');
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    if (element.id === btnId) {
      element.className = 'box';
    } else {
      element.className = 'hidden box';
    }
  }
}

div.hidden {
  visibility: hidden;
}

<button onclick="sortTab('test1')">test1</button>
<button onclick="sortTab('test2')">test2</button>
<button onclick="sortTab('test3')">test3</button>



<div class="wrap">
  <div class="box" id="test1">test1</div>
  <div class="box" id="test2">test2</div>
  <div class="box" id="test3">test3</div>
</div>