Меня попросили в интервью реализовать поведение Google Tab
https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/material-design/navs/#tabs
и ему было сказано использовать объектно-ориентированные концепции для достижения этой цели вместо обычного обработчика щелчков для всех заголовков.
Пожалуйста, исправьте меня, если следующий фрагмент кода правильный
function headerObject (element) {
this.element = element
this.clickHandler = function () {
const content = this.element.nextElementSibling;
content.style.display="block";
}
}
window.onload = function () {
const headers = document.querySelectorAll('header');
for(const header of headers) {
const headerObject1 = new headerObject(header);
header.addEventListener('click',function() {
headerObject1.clickHandler();
});
}
}
#container {
display:flex;
}
content {
display:none;
}
header {
cursor:pointer;
}
<section id="container">
<section>
<header id="Tab1">Tab1</header>
<content>
content-1
</content>
</section>
<section>
<header id="Tab2">Tab2</header>
<content>
content-2
</content>
</section>
<section>
<header id="Tab3">Tab3</header>
<content>
content-3
</content>
</section>
</section>