Есть код по созданию табов в js. Не очень понимаю как он работает, можете объяснить что он делает? Может написать комментарии
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);
}
HTML
<body>
<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>
</body>
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>