production-evyos-systems-an.../example_components/scripts/tabs.js

30 lines
1.1 KiB
JavaScript

// Tab functionality for notifications and messages
document.addEventListener('DOMContentLoaded', function() {
// start: Tab
document.querySelectorAll('[data-tab]').forEach(function (item) {
item.addEventListener('click', function (e) {
e.preventDefault();
const tab = item.dataset.tab;
const page = item.dataset.tabPage;
const target = document.querySelector('[data-tab-for="' + tab + '"][data-page="' + page + '"]');
// Remove active class from all tab buttons
document.querySelectorAll('[data-tab="' + tab + '"]').forEach(function (i) {
i.classList.remove('active');
});
// Hide all tab content
document.querySelectorAll('[data-tab-for="' + tab + '"]').forEach(function (i) {
i.classList.add('hidden');
});
// Add active class to clicked tab button and show its content
item.classList.add('active');
if (target) {
target.classList.remove('hidden');
}
});
});
// end: Tab
});