Полчаса назад кто-то задал вопрос (уже удалил), где показал код на JQ со своей тренировочной реализацией.
Я оставила комментарий, что не очень, т.к. зачем для таких простых вещей использовать JQuery. А потом поймала себя на мысли, что я никогда их на js сама и не делала))) Не приходилось, т.к. сама только учусь.
Повторю его вопрос, как делать правильно, чтобы легко было добавлять/поддерживать и т.п.
https://codepen.io/kris-iris/pen/ZqBEPv?editors=1010Javascript для табовclass Tabs{
constructor(){
this.tabList = document.querySelectorAll('.pageNav__tabItem');
this.contentList = document.querySelectorAll('.pageNav__contentItem');
let nav = document.querySelector('.pageNav');
nav.addEventListener('click', e => this.show(e));
this.setIndex();
}
show(e){
let t = e.target;
if (!t.classList.contains('pageNav__tabItem')) return;
this.removePrev();
let index = t.getAttribute('data-index');
let content = document.querySelector('.pageNav__contentItem[data-index="'+index+'"]');
t.classList.add('pageNav__tabItem--active');
content.classList.add('pageNav__contentItem--active');
}
setIndex(){
for (let i = 0; i < this.tabList.length; i++){
this.tabList[i].setAttribute('data-index', i);
this.contentList[i].setAttribute('data-index', i);
}
}
removePrev(){
for (let i = 0; i < this.tabList.length; i++){
this.tabList[i].classList.remove('pageNav__tabItem--active');
this.contentList[i].classList.remove('pageNav__contentItem--active');
}
}
}
document.addEventListener('DOMContentLoaded', ()=>{
let tabs = new Tabs();
})
Не откажусь от ссылки на пример хорошего кода!
