You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
neptune/core/static/tabs.js

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();