Табови на JavaScript-у

Сада ћемо имплементирати табове. Одмах погледајте пример онога што се од вас захтева:

Проучите и верстку, на којој ћемо решавати задатак:

html<div id="parent">
  <div class="menu">
    <a href="" class="active">таб 1</a>
    <a href="">таб 2</a>
    <a href="">таб 3</a>
  </div>
  <div class="tabs">
    <div class="tab active">
      текст таба 1
    </div>
    <div class="tab">
      текст таба 2
    </div>
    <div class="tab">
      текст таба 3
    </div>
  </div>
</div>

css#parent {
  margin: 0 auto;
  width: 400px;
}

.menu a {
  margin-right: 5px;
  display: inline-block;
  padding: 10px;
  color: black;
  text-decoration: none;
  border: 1px solid gray;
}
.menu a:hover {
  background: #f8f8f8;
}
.menu a.active {
  border-color: transparent;
  background: #f2f2f2;
}

.tabs .tab:not(.active) {
  display: none;
}
.tabs .tab {
  padding: 10px;
  background: #f2f2f2;
  height: 300px;
}

Обратите пажњу на то да активна веза и активни таб имају класу active.

Дискусија

Хајде сада да разговарамо о томе како решити овај задатак. Очигледно је да некако треба повезати везе са одговарајућим табовима. У овом часу из теоретског уџбеника већ смо разматрали могуће варијанте.

У овом случају предлажем да се везе и табови једноставно повежу по позицији: прва веза ће отворити први таб, друга веза - други таб и тако даље.

Општи алгоритам ће изгледати овако: при клику на дугме морамо пронаћи везу са класом и уклонити јој ту класу. На сличан начин морамо пронаћи таб са том класом и такође јој уклонити ту класу.

Затим морамо узети везу на коју је кликнуто и активирати је. Затим морамо узети таб који има исти број, као и наша веза - и такође га активирати.