35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
|
// tabbed browsing for the modal
|
||
|
|
function initTabs() {
|
||
|
|
TABS.forEach((tab) => {
|
||
|
|
tab.addEventListener('click', (e) => {
|
||
|
|
let selected = tab.getAttribute('data-tab');
|
||
|
|
updateActiveTab(tab);
|
||
|
|
updateActiveContent(selected);
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateActiveTab(selected) {
|
||
|
|
TABS.forEach((tab) => {
|
||
|
|
if (tab && tab.classList.contains(ACTIVE_CLASS)) {
|
||
|
|
tab.classList.remove(ACTIVE_CLASS);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
selected.classList.add(ACTIVE_CLASS);
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateActiveContent(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);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
var TABS = [...document.querySelectorAll('#tabs li')];
|
||
|
|
var CONTENT = [...document.querySelectorAll('#tab-content div')];
|
||
|
|
var ACTIVE_CLASS = 'is-active';
|
||
|
|
initTabs();
|