Есть обычные несложные табы
<div class="blog__tabs">
<div class="blog__items">
<div data-tab="tab-1" class="blog__item blog__item--active">
1
</div>
<div data-tab="tab-2" class="blog__item">
2
</div>
<div data-tab="tab-3" class="blog__item">
3
</div>
<div data-tab="tab-4" class="blog__item">
4
</div>
<div data-tab="tab-5" class="blog__item">
5
</div>
</div>
<div class="blog__contents">
<div id="tab-1" class="blog__content">
ПЕРВЫЙ Lorem ipsum dolor sit amet, consectetur adipisicing.
</div>
<div id="tab-2" class="blog__content blog__content--none">
ВТОРОЙ Lorem ipsum dolor sit amet consectetur adipisicing.
</div>
<div id="tab-3" class="blog__content blog__content--none">
ТРЕТИЙ Lorem ipsum dolor sit, amet consectetur adipisicing.
</div>
<div id="tab-4" class="blog__content blog__content--none">
ЧЕТВЕРТЫЙ Lorem, ipsum dolor sit amet consectetur, adipisicing.
</div>
<div id="tab-5" class="blog__content blog__content--none">
ПЯТЫЙ Lorem ipsum, dolor, sit amet consectetur adipisicing.
</div>
</div>
</div>
.blog__content--none {
display: none;
}
.blog__item--active {
color: red;
}
const header = document.querySelector('.blog__items');
const main = document.querySelector('.blog__contents');
document.querySelector('.blog__items').addEventListener('click', e => {
const o = e.target
header.querySelector('.blog__item--active').classList.remove('blog__item--active')
main.querySelectorAll('.blog__content').forEach(o => o.classList.add('blog__content--none'))
const content = document.querySelector('#' + o.dataset.tab);
content.classList.remove('blog__content--none')
o.classList.add('blog__item--active')
})
Когда я помещаю в blog__item например h3 и span з текстом то весь таб зразу перестает работать в чем может быть проблема ?