Проникся идеей нативного js, которую последнее время сильно продвигают в массы и решил попробовать написать хоть что-то без любимого jquery. Поэтому отложил jquery в сторону и написал простую переключалку вкладок на нативном js. И встал в ступор.
Вот html
<nav id="tabNav">
<ul class="tabNavList">
<li><a href="#tab1" class="act">Таб 1</a></li>
<li><a href="#tab2">Таб 2</a></li>
<li><a href="#tab3">Таб 3</a></li>
<li><a href="#tab4">Таб 4</a></li>
</ul>
</nav>
<div id="tabsWrap">
<div class="tab act" id="tab1">Контент 1</div>
<div class="tab" id="tab2">Контент 2</div>
<div class="tab" id="tab3">Контент 3</div>
<div class="tab" id="tab4">Контент 4</div>
</div>
А вот что я написал на js
document.addEventListener('DOMContentLoaded', function(){
'use strict';
var doc = document,
tabNavList = doc.querySelectorAll('#tabNav a'),
tabs = doc.querySelectorAll('.tab');
var removeClass = function(elem, className){
var elemLength = elem.length,
i;
// Будем использовать цикл, когда элементов в коллекции будет больше 1
if(elemLength > 1){
for (i = 0; i < elemLength; i++) {
elem[i].classList.remove(className);
}
} else {
elem.classList.remove(className);
}
};
for (var i = 0; i < tabNavList.length; i++) {
tabNavList[i].addEventListener('click', function(event){
event.preventDefault();
// Храним id вкладки
var tabID = doc.getElementById(this.getAttribute('href').slice(1));
// Активный класс у ссылок
removeClass(tabNavList, 'act');
this.classList.add('act');
// Активный класс у вкладок
removeClass(tabs, 'act');
tabID.classList.add('act');
});
};
});
Для меня было диким удивлением, что
addEventListener не хотел работать с
querySelectorAll, ну и я решил написать цикл, что бы клик работал для всех элементов коллекции! Но как написал это, испугался, чет каким-то говнокодом пахнет)). Смирившись я дошел до того, как добавляю ссылке активный класс, но заступорился, а как удалить у всех других ссылок и табов класс
act? Тоже нужно писать цикл для всех элементов в коллекции?
