Табове на JavaScript

Сега ще реализираме табове. Веднага вижте пример за това, което се изисква от вас:

Проучете и markup-а, върху който ще решаваме задачата:

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.

Обсъждане

Нека сега обсъдим как да решим тази задача. Очевидно е, че трябва по някакъв начин да свържем връзките със съответстващите им табове. В този урок от теоретичния учебник вече разгледахме възможните варианти.

В този случай предлагам да свържа връзките и табовете просто по позиция: първата връзка ще отваря първия таб, втората връзка - втория таб и така нататък.

Общият алгоритъм ще изглежда така: при натискане на бутон трябва да намерим връзката с класа и да й премахнем този клас. По същия начин трябва да намерим таба с този клас и също да му премахнем този клас.

След това трябва да вземем връзката, върху която е бил кликнат и да я активираме. След това трябва да вземем таба, който има същия номер, като нашата връзка - и също да го активираме.