Javascript 显示一个或多个已隐藏的元素及其内容

我被困住了，不知道如何继续前进。我希望能够单击选项卡以显示其内容。使用我当前拥有的代码，当我单击单个选项卡时，它会显示所有选项卡的内容。但我只想点击显示与单个选项卡相关的内容。我正在寻找一个普通的javascript解决方案

代码如下：（内联如下）

CSS:

JavaScript:

var tabHeaders = document.getElementsByClassName('tab-header');
for (var i = 0; i < tabHeaders.length; i++) {
    tabHeaders[i].addEventListener('click', activateTab);
}

function activateTab() {
    var tabContents = document.getElementsByClassName('tab-content');
    for (var i = 0; i < tabContents.length; i++) {
        tabContents[i].classList.add('tab-active');
    }
}

var tabHeaders=document.getElementsByClassName（'tab-header'）；
对于（var i=0；i

HTML:

表1
Lorem ipsum door sit amet，Concertetur adipising elit。二次积存物是一种含有多种物质的物质，它们与光照有关，并因其本身的缺陷而受到尊重
表2
Lorem ipsum door sit amet，Concertetur adipising elit。二次积存物是一种含有多种物质的物质，它们与光照有关，并因其本身的缺陷而受到尊重

这是因为通过使用

document.getElementsByClassName

可以获得页面中的所有

选项卡内容

选项卡，而不是单击的

选项卡标题

元素的DOM级别。您可以使用

选项卡标题

的属性来获取

选项卡标题

旁边的下一个DOM节点：

function activateTab() {
    this.nextSibling.classList.add("tab-active");
}

或者，如果您不确定

选项卡内容

是否肯定会直接出现在

选项卡标题

之后，您可以使用以下方法进行查询：

---

请注意，最后一种方法在IE8以下的任何情况下都不起作用，但同样，原始问题中的

classList

属性也不起作用。

您正在将

选项卡活动

添加到

选项卡内容

元素的所有。您只需将其添加到单击的标题后面的标题：

var tabHeaders=document.getElementsByClassName（'tab-header'）；
对于（var i=0；i

注:

• 我正在使用

  nextElementSibling

  获取下一个同级元素，因为您在原始版本中使用了

  classList

  ，所以我认为您仅在相当最新的浏览器上使用此代码。如果要在较旧的浏览器上使用它，可以使用

  nextSibling

  （也可以使用

  className

  而不是

  classList

  ）

---

啊，我明白了。我以后会注意到这一点。谢谢你的编辑。这次我把它移到了问题中，因为你是新来的！（并撤回了我的投票。）当有人要求您在另一个问题上使用jsbin时，您可能会觉得您收到了相互冲突的请求。将代码放入问题中是必要的。此外，使用//并链接到它是一种很好的选择，但不是一种要求。在这两种情况下，始终发布。（您在此处已经完成了此操作。）对我来说，这个解决方案太完美了。谢谢你的帮助。

<div>
  <h3 class="tab-header">Tab1</h3>
  <p class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium odio iste aliquam molestias corporis blanditiis nihil soluta sint illum quibusdam reprehenderit sed quaerat iusto maiores error iure ducimus dicta ipsum.</p>
</div>

<div>
  <h3 class="tab-header">Tab2</h3>
  <p class="tab-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium odio iste aliquam molestias corporis blanditiis nihil soluta sint illum quibusdam reprehenderit sed quaerat iusto maiores error iure ducimus dicta ipsum.</p>
</div>

function activateTab() {
    this.nextSibling.classList.add("tab-active");
}

function activateTab() {
    this.parentNode.querySelector(".tab-content").classList.add("tab-active");
}

var tabHeaders = document.getElementsByClassName('tab-header');
for (var i = 0; i < tabHeaders.length; i++) {
    tabHeaders[i].addEventListener('click', activateTab);
}

function activateTab() {
    var tabContents = this.nextElementSibling;
    while (tabContents && (!tabContents.classList || !tabContents.classList.contains("tab-content"))) {
        tabContents = tabContents.nextElementSibling;
    }
    if (tabContents) {
        tabContents.classList.toggle("tab-active");
    }
}