how does this javascript code work

 var tabsLink = document.querySelectorAll('.nav-tabs a'), // получил все ссылки tabsElement = document.querySelectorAll('.tab-pane'), // получил все табы i; tabsElement[0].classList.add('tab-open'); // добавить класс к первому элементу tab open c id = tabs1 var showTabs = function (e) { e.preventDefault(); // убрали события ссылки чтобы не перенаправляло var targetElement = document.querySelectorAll(this.getAttribute('href')); // здесь получаем targetelemtn this.getAttribute('href') ворачивывает ссылку, в ссылки храниться #tabs2 | 3 | 1 // то есть document.querySelectorAll('#tabs3'); for (i = 0; i < targetElement.length; i++) { if (targetElement[i].classList.contains('tab-open')) { return false; } else targetElement[i].classList.add('tab-open'); // если этот элемент target имеет этот классс то остановаить цикл или же добавить класс } targetElement = document.querySelectorAll(".tab-pane.tab-open:not(" + this.getAttribute('href') + ")"); // все target элементы кроме текущего for (i = 0; i < targetElement.length; i++) { targetElement[i].classList.remove('tab-open'); // убрать у них класс tab open } }; for (i = 0; i < tabsLink.length; i++) { tabsLink[i].addEventListener('click', showTabs); // добавить событие для каждой кнопки } 

 tabsElement[0].classList.add('tab-open'); // при загрузке первый таб закгужается активным tabsLink[i].addEventListener('click', showTabs) // в обект showTabs отправить event var targetElement = document.querySelectorAll(this.getAttribute('href')); for (i = 0; i < targetElement.length; i++) { if (targetElement[i].classList.contains('tab-open')) { return false; } else targetElement[i].classList.add('tab-open'); // тут добавляет класс tab-open // здес: удаляет класс предыдущий активного таба for (i = 0; i < targetElement.length; i++) { targetElement[i].classList.remove('tab-open'); } 

Slightly added formatting to your code. I hope it is now clear what he is doing ..

 var tabsLink = document.querySelectorAll('.nav-tabs a'), tabsElement = document.querySelectorAll('.tab-pane'), i; tabsElement[0].classList.add('tab-open'); var showTabs = function(e) { e.preventDefault(); var targetElement = document.querySelectorAll(this.getAttribute('href')); for (i = 0; i < targetElement.length; i++) { if (targetElement[i].classList.contains('tab-open')) { return false; } else targetElement[i].classList.add('tab-open'); } targetElement = document.querySelectorAll(".tab-pane.tab-open:not("+ this.getAttribute('href')+")"); for (i = 0; i < targetElement.length; i++) { targetElement[i].classList.remove('tab-open'); } }; for (i = 0; i < tabsLink.length; i++) { tabsLink[i].addEventListener('click', showTabs); } 

 <div class="container"> <div class="tabs-wrapper"> <ul class="nav-tabs"> <li><a href="#tabs1" class="tab-active" data-toggle="tab">Tabs 1</a> </li> <li><a href="#tabs2" data-toggle="tab">Tabs 2</a> </li> <li><a href="#tabs3" data-toggle="tab">Tabs 3</a> </li> </ul> <div class="tab-content"> <div class="tab-pane" id="tabs1"><span class="title-tabs">Tabs1</span> Текст </div> <div class="tab-pane" id="tabs2"><span class="title-tabs">Tabs2</span> Текст </div> <div class="tab-pane" id="tabs3"><span class="title-tabs">Tabs3</span> Текст </div> </div> </div> </div>