0
我有問題。一切工作正常,但如果我添加更多的標籤,所以「isVisible」類被添加到所有其他標籤。我該如何解決這個問題?javascript選項卡無法正常工作
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(巴貝爾)
(() => {
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')
}
})
})()
CSS:.tabs__item { display:none; } .tabs .isActive { display:block; } –