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

Question

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

这是代码:http://codepen.io/anon/pen/KCJAc (下面内联)

CSS:

.tab-content {
    display: block;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 1s ease-out;
}

.tab-active {
    height: auto;
    opacity: 1;
}

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

HTML:

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

Answer 1

您正在将 tab-active 添加到 所有 tab-content 元素。您只想将它​​添加到被单击的 header 之后的那个:Updated Pen

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");
    }
}

注意事项:

• 我正在使用 nextElementSibling 获取作为元素的下一个同级元素，因为您在原始版本中使用了 classList，所以我认为您只是公平地使用此代码最新的浏览器。如果您打算在较旧的浏览器上使用它，则可以改用 nextSibling(并且还可以使用 className 而不是 classList。