ЈаваScript табови

Сега ќе имплементираме табови. Веднаш погледнете го примерот на она што се бара од вас:

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

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.

Дискусија

Ајде сега да разговараме за тоа како да ја решиме оваа задача. Очигледно е дека треба некако да се поврзат врските со соодветните табови. Во оваа лекција од теоретскиот учебник веќе ги разгледавме можните опции.

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

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

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