I am currently trying to implement a tab element on my site. I am using Elementor via Wordpress. In the edit mode everything works fine, but one the live page the selection of the different tabs doesnt work.
const tabs = document.querySelectorAll('[data-tab-target]')
const tabContents = document.querySelectorAll('[data-tab-content]')
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContent => {
tabContent.classList.remove('active')
})
tabs.forEach(tab => {
tab.classList.remove('active')
})
tab.classList.add('active')
target.classList.add('active')
})
})<ul class="tabs">
<li data-tab-target="#einsteiger" class="tab"><h3>Einsteiger</h3><p id="preis">bis 2.999 €</p></li>
<li data-tab-target="#mittelklasse" class="active tab"><h3>Mittelklasse </h3><p id="preis">von 3.000 bis 4.499 €</p></li>
<li data-tab-target="#high-end" class="tab"><h3>High-End</h3><p id="preis">ab 4.500 €</p></li>
</ul>
<div class="tab-content">
<div id="einsteiger" data-tab-content >
<h1>test1</h1>
<p>test</p>
</div>
<div id="mittelklasse" data-tab-content class="active">
<h1>test2</h1>
<p></p>
</div>
<div id="high-end" data-tab-content >
<h1>test3</h1>
<p></p>
</div>
</div>