<style>
.lazy-tabs {
display: flex;
margin-bottom: 20px;
flex-wrap: wrap;
}
.lazy-tabs button {
padding: 10px 20px;
border: 1px solid #ccc;
background: #f7f7f7;
margin-right: 5px;
cursor: pointer;
font-weight: bold;
}
.lazy-tabs button.active {
background: #006bb2;
color: white;
}
.tab-content {
display: none;
padding: 20px 0;
border-top: 2px solid #ddd;
}
.tab-content.active {
display: block;
}
</style>

<div class=”lazy-tabs”>
<button class=”tab-button active” data-tab=”tab1″>Tabelle 1</button>
<button class=”tab-button” data-tab=”tab2″>Tabelle 2</button>
<button class=”tab-button” data-tab=”tab3″>Tabelle 3</button>
<button class=”tab-button” data-tab=”tab4″>Tabelle 4</button>
<button class=”tab-button” data-tab=”tab5″>Tabelle 5</button>
</div>

<div id=”tab1″ class=”tab-content active”>
<!– Direkt geladen –>

</div>
<div id=”tab2″ class=”tab-content” data-shortcode=’‘></div>
<div id=”tab3″ class=”tab-content” data-shortcode=’‘></div>
<div id=”tab4″ class=”tab-content” data-shortcode=’‘></div>
<div id=”tab5″ class=”tab-content” data-shortcode=’‘></div>

<script>
document.addEventListener(‘DOMContentLoaded’, function () {
const buttons = document.querySelectorAll(‘.tab-button’);
const contents = document.querySelectorAll(‘.tab-content’);

buttons.forEach(button => {
button.addEventListener(‘click’, function () {
// Buttons wechseln
buttons.forEach(btn => btn.classList.remove(‘active’));
this.classList.add(‘active’);

// Inhalte wechseln
const tabId = this.getAttribute(‘data-tab’);
contents.forEach(content => {
if (content.id === tabId) {
content.classList.add(‘active’);

// Lazy Load: Nur laden wenn leer
if (!content.innerHTML.trim()) {
const shortcode = content.getAttribute(‘data-shortcode’);
if (shortcode) {
fetch(‘/wp-admin/admin-ajax.php’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’
},
body: `action=do_shortcode&shortcode=${encodeURIComponent(shortcode)}`
})
.then(res => res.text())
.then(html => {
content.innerHTML = html;
});
}
}

} else {
content.classList.remove(‘active’);
}
});
});
});
});
</script>