我被困住了,不确定如何继续前进。我希望能够单击一个选项卡以显示其内容。使用我目前拥有的代码,当我单击单个选项卡时,它会显示所有选项卡的内容。但我只希望点击显示与该单个选项卡关联的内容。我正在寻找普通的 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>
最佳答案
您正在将 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
。
关于javascript - 显示一个或多个元素及其已隐藏的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21108518/