let tabOne = document.querySelector('#tab_one');
let tabTwo = document.querySelector('#tab_two');
tabBtnOne.addEventListener('click', function() {
tabOne.classList.add('open');
tabTwo.classList.remove('open');
});
tabBtnTwo.addEventListener('click', function() {
tabOne.classList.remove('open');
tabTwo.classList.add('open');
});
я понимаю что есть более правильный подход но не могу найти
const CLASS_TAB = 'tab';
const CLASS_OPEN = 'open';
const block = document.querySelector('.block'); // родительский блок табов
const tabs = block.querySelectorAll(`.${CLASS_TAB}`);
block.addEventListener('click', ({target}) => {
const tab = target.closest(`.${CLASS_TAB}`);
if (tab) {
tabs.forEach((item) => {
item.classList.remove(CLASS_OPEN);
});
tab.classList.add(CLASS_OPEN);
}
});if (tab) tabs.forEach(t => t.classList.toggle('open', t === tab));
я понимаю что есть более правильный подход но не могу найти
let tabs = $('.tab') // Соответственно всем вкладкам добавить класс в разметке
tabs.on('click', function() {
tabs.removeClass('open')
this.addClass('open')
})class Tab {
constructor(container, id) {
this.$ = $(container)
this.$.data('id', id)
this.id = id
}
on(event, xt) {
this.$.on(event, xt)
return this
}
onClick(xt) {
this.on('click', xt)
return this
}
}
class Tabs {
#openedClass = 'open'
#defaultTabId = 0
constructor(selector, openedTabId = defaultTabId) {
this.selector = selector
this.$ = $(selector)
this.list = this.$.each((i, cnt) => this.tabInit(new Tab(cnt, i))).toArray()
this.open(openedTabId)
}
tabInit(tab) {
tab.onClick(() => this.open(tab.id))
return this
}
open(id) {
for(const tab of this.list) {
if (tab.id == id) {
tab.$.addClass(openedClass)
} else {
tab.$.removeClass(openedClass)
}
}
return this
}
close(id) {
for(const tab of this.list) {
if (tab.id == id) {
tab.$.removeClass(openedClass)
} else {
tab.$.addClass(openedClass)
}
}
return this
}
get opened() {
return this.list.find((t) => t.$.hasClass(openedClass))
}
}