Tabovi na JavaScript-u

Sada ćemo implementirati tabove. Odmah pogledajte primer onoga što se od vas zahteva:

Proučite i markup na kome ćemo rešavati zadatak:

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

Obratite pažnju na to da aktivni link i aktivni tab imaju klasu active.

Diskusija

Hajde sada da razmotrimo kako rešiti ovaj zadatak. Očigledno je da je potrebno nekako povezati linkove sa odgovarajućim tabovima. U ovoj lekciji iz teorijskog udžbenika već smo razmatrali moguće opcije.

U ovom slučaju predlažem da povežemo linkove i tabove jednostavno po poziciji: prvi link će otvoriti prvi tab, drugi link - drugi tab i tako dalje.

Opšti algoritam će izgledati ovako: pritiskom na dugme treba da pronađemo link sa klasom i da mu uklonimo tu klasu. Na sličan način treba da pronađemo tab sa tom klasom i takođe da mu uklonimo tu klasu.

Zatim treba da uzmemo link na koji je bio klik i da ga aktiviramo. Zatim treba da uzmemo tab koji ima isti broj, kao i naš link - i takođe da ga aktiviramo.