Question

我被困住了，不确定如何继续前进。我希望能够单击选项卡以显示其内容。使用我目前拥有的代码，当我单击一个选项卡时，它会显示所有选项卡的内容。但我只想让点击显示与该单个标签相关联的内容。我正在寻找一个vanilla 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元素的所有。您只想将其添加到点击标题后面的那个：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。

Answer 2

这是因为使用document.getElementsByClassName您将获得页面中的所有tab-content个标签，而不是点击的{em> DOM级别 { {1}}元素。您可以使用tab-header的{{3}}属性获取tab-header旁边的下一个DOM节点：

tab-header

或者，如果您不确定function activateTab() { this.nextSibling.classList.add("tab-active"); }是否肯定会在tab-content之后直接显示，您可以使用nextSibling查询parentNode：

tab-header

请注意，最后一种方法不能用于低于IE8的任何方法，但原始问题中的function activateTab() { this.parentNode.querySelector(".tab-content").classList.add("tab-active"); }属性也不会。

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

2 个答案: