1 const removeActiveClasses = function (ulElement) {
2 const lis = ulElement.querySelectorAll('li');
3 Array.prototype.forEach.call(lis, function(li) {
4 li.classList.remove('active');
8 const getChildPosition = function (element) {
9 var parent = element.parentNode;
11 for (var i = 0; i < parent.children.length; i++) {
12 if (parent.children[i] === element) {
17 throw new Error('No parent found');
20 window.addEventListener('load', function () {
21 const tabLinks = document.querySelectorAll('ul.tab li a');
23 Array.prototype.forEach.call(tabLinks, function(link) {
24 link.addEventListener('click', function (event) {
25 event.preventDefault();
27 liTab = link.parentNode;
28 ulTab = liTab.parentNode;
29 position = getChildPosition(liTab);
30 if (liTab.className.includes('active')) {
34 removeActiveClasses(ulTab);
35 tabContentId = ulTab.getAttribute('data-tab');
36 tabContentElement = document.getElementById(tabContentId);
37 removeActiveClasses(tabContentElement);
39 tabContentElement.querySelectorAll('li')[position].classList.add('active');
40 liTab.classList.add('active');