javascript选项卡不能正常工作
javascript选项卡不能正常工作
提问于 2016-11-16 15:30:08
我有个问题。一切都很好，但是如果我添加了更多的选项卡，那么"isVisible“类就会添加到所有其他选项卡中。我该如何解决这个问题？
HTML：
<div class="content">
<button class="nextTab">Next Tab</button>
<div class="tabs">
<div class="tabs__item isActive">
<p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="tabs__item">
<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>Javascript (Babel)
(() => {
const tabs = document.querySelector('.tabs')
, tabsItem = document.querySelectorAll('.tabs__item')
, nextTab = document.querySelector('.nextTab')
nextTab.addEventListener('click', () => {
for(let i = 0; i < tabsItem.length; i++) {
tabsItem[i].classList.toggle('isActive')
}
})
})()回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-16 15:37:43
您应该跟踪当前的选项卡索引，以便能够切换到下一个索引。
(() => {
const tabs = document.querySelector('.tabs')
, tabsItem = document.querySelectorAll('.tabs__item')
, nextTab = document.querySelector('.nextTab')
, currentTab = 0;
nextTab.addEventListener('click', () => {
if (++currentTab > tabsItem.length - 1) currentTab = 0;
document.querySelector('.isActive').classList.remove('isActive'));
tabsItem[currentTab].classList.add('isActive'))
});
})()页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40635982
复制相关文章
相似问题
腾讯云开发者
