-
Notifications
You must be signed in to change notification settings - Fork 0
/
tabs.js
40 lines (33 loc) · 1.14 KB
/
tabs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function tabs(tabsSelector, contentSelector, parentSelector, activeClass) {
let tabs = document.querySelectorAll(tabsSelector),
tabsContent = document.querySelectorAll(contentSelector),
tabsParent = document.querySelector(parentSelector);
function hideTabContent() {
tabsContent.forEach(item => {
item.classList.add('hide');
item.classList.remove('show', 'fade');
});
tabs.forEach(item => {
item.classList.remove(activeClass);
});
}
function showTabContent(i = 0) {
tabsContent[i].classList.add('show', 'fade');
tabsContent[i].classList.remove('hide');
tabs[i].classList.add(activeClass);
}
hideTabContent();
showTabContent();
tabsParent.addEventListener('click', function (event) {
const target = event.target;
if (target && target.classList.contains(tabsSelector.slice(1))) {
tabs.forEach((item, i) => {
if (target == item) {
hideTabContent();
showTabContent(i);
}
});
}
});
}
export default tabs;