Question

我正在制作一个按钮菜单，用于隐藏其类别与所点击按钮的类别不匹配的div。单击时，每个按钮应仅显示具有相同类的div。我对如何使用Javascript做到这一点感到很困惑，我希望有人能够帮助我？

提前致谢！

＆＃13;

function sortTab(tabClass) {
  
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

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';
    }
  }
}

＆＃13;

div.hidden {
  visibility: hidden;
}

＆＃13;

<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>

＆＃13;

Answer 2

正如其他人所说，ids不能重复，只能上课。话虽如此，这应该适合您的需求：

<!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>

Answer 3

＆＃13;

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';
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

按住菜单，隐藏其类别与点击的按钮不匹配的div

3 个答案: