Почему при помещении в таб любого либо контента кроме текста без обверток span, h1, p и т.д. таб ломаеться и перестает роботать?

Question

[Zhenya Tureysky]

Есть обычные несложные табы

<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 з текстом то весь таб зразу перестает работать в чем может быть проблема ?

Comments

[AUser0]

Давайте расшифровку понятию "сразу перестаёт работать". А то вдруг...

Answer 1

[Сергей delphinpro]

Делайте делегирование правильно https://qna.habr.com/q/1235504

const o = e.target.closest('.blog__item')

Comments

[Zhenya Tureysky]

Спасибо теперь все как надо

const header = document.querySelector('.blog__items');
const main = document.querySelector('.blog__contents');
document.querySelector('.blog__items').addEventListener('click', e => {
const o = e.target.closest('.blog__item')
  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')
})