<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tabs">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#" data-tab-pane="#first-1, #first-2, #first-3, #first-4">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-tab-pane="#second-1, #second-2, #second-3">Second</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-tab-pane="#third-1, #third-2, #third-3, #third-4, #third-5">Third</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="first-1" role="tabpanel">This</div>
<div class="tab-pane active" id="first-2" role="tabpanel">Is</div>
<div class="tab-pane active" id="first-3" role="tabpanel">First</div>
<div class="tab-pane active" id="first-4" role="tabpanel">Tab</div>
<div class="tab-pane" id="second-1" role="tabpanel">Is</div>
<div class="tab-pane" id="second-2" role="tabpanel">Second</div>
<div class="tab-pane" id="second-3" role="tabpanel">One</div>
<div class="tab-pane" id="third-1" role="tabpanel">And</div>
<div class="tab-pane" id="third-2" role="tabpanel">This</div>
<div class="tab-pane" id="third-3" role="tabpanel">Is</div>
<div class="tab-pane" id="third-4" role="tabpanel">Last</div>
<div class="tab-pane" id="third-5" role="tabpanel">One</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const TAB_CONTROL_ACTIVE_CLASS_NAME = 'active';
const TAB_PANE_ACTIVE_CLASS_NAME = 'active';
document.querySelectorAll('.tabs').forEach(wrapper => {
const controls = wrapper.querySelectorAll('.nav-tabs .nav-link[data-tab-pane]');
controls.forEach(control => {
control.addEventListener('click', e => {
e.preventDefault();
if (control.classList.contains(TAB_CONTROL_ACTIVE_CLASS_NAME)) {
return;
}
controls.forEach(item => item.classList.remove(TAB_CONTROL_ACTIVE_CLASS_NAME));
control.classList.add(TAB_CONTROL_ACTIVE_CLASS_NAME)
wrapper.querySelectorAll(`.tab-pane.${TAB_PANE_ACTIVE_CLASS_NAME}`).forEach(pane => {
pane.classList.remove(TAB_PANE_ACTIVE_CLASS_NAME);
});
control.dataset.tabPane?.split(',').forEach(selector => {
wrapper.querySelector(selector)?.classList.add(TAB_PANE_ACTIVE_CLASS_NAME);
});
});
});
});
});
</script>
|