Реализация вкладки с использованием OOPS JavaScript - PullRequest
0 голосов
/ 05 ноября 2018

Меня попросили в интервью реализовать поведение 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...