使用OOPS JavaScript实现标签

Question

在一次采访中我被要求实施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>