Question

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

将显示tab1。如果我改变[0]则不会出现任何内容。

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

编辑：我忘了告诉模态是显示：无是开头

Answer 1

我建议使用querySelector

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

或

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

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

中只有一个元素

document.getElementsByClassName("modal")

集合，这是外部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>

Answer 2

可以有多个具有相同类名的元素，因此您必须使用复数“get elements”，并且该方法返回匹配元素的列表。您可以使用children属性

来访问标签页

function showNthModal (n) {
  var modals = document.getElementsByClassName("modal");
  var modal = modals[n - 1];
  modal.style.display = "block";
  showNthTab(modal, 2);
}
function showNthTab (parent, n) {
  var tab = parent.children[n];
  tab.style.display = "block";
}

div{display:none;border:1px solid black;padding:0 1em;}

<p>
  <button onclick="showNthModal(1)">Show modal1</button>
  <button onclick="showNthModal(2)">Show modal2</button>
</p>
<div class="modal">
  <p>modal1</p>
  <div class="tab1"><p>tab1</p></div>
  <div class="tab2"><p>tab2</p></div>
</div>
<div class="modal">
  <p>modal2</p>
  <div class="tab1"><p>tab1</p></div>
  <div class="tab2"><p>tab2</p></div>
</div>

Answer 3

document.getElementsByClassName("modal")[0].lastChild.style.display = "block";

请注意它是getElementsByClassName。您需要[0]来获取第一个匹配元素。

然后您可以使用lastChild来引用tab2。或者您可以使用：

document.getElementsByClassName("tab2")[0].style.display = "block";

Answer 4

要使用类“modal”从div访问div “tabs”类，您应该以这种方式使用childNodes属性：

document.getElementsByClassName("modal")[0].childNodes[0].style.display = 'block';

现在，您只需更改childNodes返回的集合中的索引，即可单独访问每个标签。您甚至可以使用length属性来了解父div中有多少个选项卡，例如numTabs = document.getElementsByClassName("modal")[0].childNodes.length，并使用该信息执行for循环并根据您的需要修改每个选项卡。

我建议使用父div的id，并使用方法getElementById()而不是getElementsByClassName()，所以如果你在另一个元素中再次使用“modal”类，你就不要在使用getElementsByClassName("modal")[0]时，您的代码会出现不受欢迎的行为，因为您的目标div的索引可能会发生变化。

最后一句话，正如@mplungjan已经提到的，在你的问题document.getElementByClassName中缺少一个“s”。它应该是document.getElementsByClassName

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

4 个答案: