按钮菜单，用于隐藏类与所单击的按钮不匹配的按钮

Button menu that hides divs whose classes don't match the button clicked

本文关键字：按钮不匹配单击菜单用于隐藏更新时间：2023-09-26

我正在制作一个按钮菜单，该菜单隐藏了类与所单击的按钮不匹配的按钮。当单击每个按钮时，应该只显示具有相同类的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>

首先，您不能将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>

正如其他人所说，id不能重复，只能重复类。话虽如此，这应该符合您的需求:

<!DOCTYPE html> 
    <html>
       <head>    
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
           <script>
               function sortTab(tabID) {
                  var hidevalue="div.gallery-wrap > div:not(."+tabID+")";   
                   $("div").show();  
                   $(hidevalue).hide();
                }
           </script>
           <style> 
               .curtain {
                    width: 100px;
                    height: 100px;
                    background: black;
                    margin: 10px;
                    color: white;
                    float: left;
                }
           </style>
       </head>
       <body>
          <button id="moon" onclick="sortTab(this.id)">moon</button>
          <button id="earth" onclick="sortTab(this.id)">earth</button>
          <button id="saturn" onclick="sortTab(this.id)">saturn</button>
          <button id="mercury" onclick="sortTab(this.id)">mercury</button>
          <button id="neptune" onclick="sortTab(this.id)">neptune</button>
          <button id="sun" onclick="sortTab(this.id)">sun</button>
          <button id="jupiter" onclick="sortTab(this.id)">jupiter</button>

           <br>
           <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 class="moon sun curtain"></div>
                <div class="moon mercury curtain"></div>
           </div>
        </body>
   </html>

function sortTab(tabID) {
//alert(tabID);
var elements = document.getElementsByClassName("box");
for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].style.display = 'none';
}
document.getElementById("div_"+tabID).style.display = 'block';
}

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

<button id="test1" onclick="sortTab(this.id)">test1</button>
<button id="test2" onclick="sortTab(this.id)">test2</button>
<button id="test3" onclick="sortTab(this.id)">test3</button>
<button id="test4" onclick="sortTab(this.id)">test4</button>
<button id="test5" onclick="sortTab(this.id)">test5</button>
  
  
<div class="wrap">
  <div class="box" id="div_test1">test1</div>
  <div class="box" id="div_test2">test2</div>
  <div class="box" id="div_test3">test3</div>
  <div class="box" id="div_test4">test4</div>
  <div class="box" id="div_test5">test5</div>
</div>