<div class="tab-headers">
<button data-id="1">69</button>
<button data-id="2">187</button>
<button data-id="3">666</button>
</div>
<div class="tab-contents">
<div data-id="1">hello, world!!</div>
<div data-id="2">fuck the world</div>
<div data-id="3">fuck everything</div>
</div>
.tab-contents div {
display: none;
}
.tab-contents div.active {
display: block;
}
.tab-headers button.active {
background: red;
color: white;
}
const headerSelector = '.tab-headers button';
const contentSelector = '.tab-contents div';
const activeClass = 'active';
// делегирование, назначаем обработчик клика один раз для всех кнопок;
// соответствие кнопок и блоков устанавливаем через равенство атрибутов
document.addEventListener('click', e => {
const header = e.target.closest(headerSelector);
if (header) {
const { id } = header.dataset;
const toggle = n => n.classList.toggle(activeClass, id === n.dataset.id);
document.querySelectorAll(headerSelector).forEach(toggle);
document.querySelectorAll(contentSelector).forEach(toggle);
}
});
// или, назначаем обработчик клика каждой кнопке индивидуально;
// соответствие кнопок и блоков устанавливаем через равенство индексов
const headers = document.querySelectorAll(headerSelector);
const contents = document.querySelectorAll(contentSelector);
headers.forEach(n => n.addEventListener('click', onClick));
function onClick() {
const index = Array.prototype.indexOf.call(headers, this);
const toggle = (n, i) => n.classList.toggle(activeClass, i === index);
headers.forEach(toggle);
contents.forEach(toggle);
}
