javascript - 如何在一个类中显示一个类？

Question

如何使用 Javascript 显示“tab2”？如果我使用document.getElementByClassName("modal")[0].style.display = 'block';

tab1 将显示。如果我更改 [0]，什么也不会出现。

<div class = "modal"> 
     <div class = "tab1">
         ...
     </div>
     <div class = "tab2">
         ...
     </div>
</div>

编辑:我忘了告诉 modal 是 display: none 是开头

Answer 1

我建议使用 querySelector

document.querySelector(".tab2").style.display = 'block';

或

document.querySelector(".modal .tab2").style.display = 'block';

在您的 HTML 中，您只有一个具有模态类的元素，因此

中只有一个元素

document.getElementsByClassName("modal") 

collection，也就是外层的div。集合是从零开始的，因此 [0]

如果要访问tab2，使用

document.getElementsByClassName("tab2")[0] 

或更好:

document.querySelector(".tab2") 

如前所述

注意:document.getElementByClassName 没有单数形式。我假设有错字

更新:我强烈建议您在每个 div 上设置一个 ID 并为选项卡指定一个类。您需要将它们全部隐藏，然后显示一个，然后再显示父级

window.onload=function() {
  document.querySelector("#tab2").style.display="block"; // unhide tab2
  document.querySelector("#modal1").style.display="block"; // show parent
}

#modal1 { display: none}
.tab { display: none}

<div class="modal" id="modal1"> 
     <div class = "tab" id="tab1">
         Tab 1
     </div>
     <div class = "tab" id="tab2">
         Tab 2
     </div>
</div>

更复杂:

window.onload=function() {
  var buts = document.querySelectorAll(".tabBut");
  for (var i=0;i<buts.length;i++) { 
    buts[i].onclick=function() {
      var showTab = this.getAttribute("data-tab"), tabs = document.querySelectorAll(".tab");
      for (var i=0;i<tabs.length;i++) {
        tabs[i].style.display=tabs[i].id==showTab?"block":"none";
      }  
      document.querySelector("#modal1").style.display="block"; // show parent
    }
  }  
}

#modal1 { display: none}
.tab { display: none}

<button type="button" class="tabBut" data-tab="tab1">Tab 1</button>
<button type="button" class="tabBut" data-tab="tab2">Tab 2</button>
<div class="modal" id="modal1"> 
     <div class="tab" id="tab1">
         Tab 1
     </div>
     <div class="tab" id="tab2">
         Tab 2
     </div>
</div>