Zakładki w JavaScript

Teraz zaimplementujemy zakładki. Od razu spójrz na przykład tego, co jest wymagane:

Przeanalizuj również układ, na którym będziemy rozwiązywać zadanie:

html<div id="parent">
  <div class="menu">
    <a href="" class="active">zakładka 1</a>
    <a href="">zakładka 2</a>
    <a href="">zakładka 3</a>
  </div>
  <div class="tabs">
    <div class="tab active">
      tekst zakładki 1
    </div>
    <div class="tab">
      tekst zakładki 2
    </div>
    <div class="tab">
      tekst zakładki 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;
}

Zwróć uwagę na to, że aktywny link i aktywna zakładka mają klasę active.

Dyskusja

Omówmy teraz, jak rozwiązać to zadanie. Oczywiście, że trzeba w jakiś sposób powiązać linki z odpowiadającymi im zakładkami. W tej lekcji z podręcznika teoretycznego już analizowaliśmy możliwe opcje.

W tym przypadku proponuję powiązać linki i zakładki po prostu według pozycji: pierwszy link będzie otwierał pierwszą zakładkę, drugi link - drugą zakładkę i tak dalej.

Ogólny algorytm będzie wyglądał tak: po kliknięciu na przycisk musimy znaleźć link z klasą i usunąć jej tę klasę. W analogiczny sposób musimy znaleźć zakładkę z tą klasą i również usunąć jej tę klasę.

Następnie musimy wziąć link, na który został kliknięty i aktywować go. Potem musimy wziąć zakładkę, która ma ten sam numer, co nasz link - i również ją aktywować.