36 lines
1.1 KiB
JavaScript
36 lines
1.1 KiB
JavaScript
function initTabs(unique) {
|
|
var tabs_selector = '#tabs-'+unique+' li';
|
|
var TABS = [...document.querySelectorAll(tabs_selector)];
|
|
var CONTENT = [...document.querySelectorAll('#tab-content-'+unique+' div')];
|
|
var ACTIVE_CLASS = 'is-active';
|
|
TABS.forEach((tab) => {
|
|
tab.addEventListener('click', (e) => {
|
|
let selected = tab.getAttribute('data-tab');
|
|
updateActiveTab(TABS, ACTIVE_CLASS, tab);
|
|
updateActiveContent(CONTENT, ACTIVE_CLASS, selected);
|
|
})
|
|
})
|
|
}
|
|
|
|
function updateActiveTab(TABS, ACTIVE_CLASS, selected) {
|
|
TABS.forEach((tab) => {
|
|
if (tab && tab.classList.contains(ACTIVE_CLASS)) {
|
|
tab.classList.remove(ACTIVE_CLASS);
|
|
}
|
|
});
|
|
selected.classList.add(ACTIVE_CLASS);
|
|
}
|
|
|
|
function updateActiveContent(CONTENT, ACTIVE_CLASS, selected) {
|
|
CONTENT.forEach((item) => {
|
|
if (item && item.classList.contains(ACTIVE_CLASS)) {
|
|
item.classList.remove(ACTIVE_CLASS);
|
|
}
|
|
let data = item.getAttribute('data-content');
|
|
if (data === selected) {
|
|
item.classList.add(ACTIVE_CLASS);
|
|
}
|
|
});
|
|
}
|
|
|
|
// initTabs();
|