File în JavaScript

Acum vom implementa file. Uitați-vă imediat la exemplul a ceea ce vi se cere:

Studiați de asemenea și markup-ul pe care vom rezolva problema:

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

Atenție la faptul că link-ul activ și fila activă au clasa active.

Discuție

Să discutăm acum despre cum să rezolvăm această problemă. Evident, trebuie să legăm cumva link-urile de filele corespunzătoare. În această lecție din manualul teoretic am analizat deja posibilele variante.

În acest caz, propun să legăm link-urile și filele pur și simplu după poziție: primul link va deschide prima filă, al doilea link - a doua filă și așa mai departe.

Algoritmul general va arăta astfel: la click pe buton trebuie să găsim link-ul cu clasa și să îi eliminăm această clasă. În mod similar trebuie să găsim fila cu această clasă și de asemenea să îi eliminăm această clasă.

Apoi trebuie să luăm link-ul pe care s-a făcut click și să îl activăm. Apoi trebuie să luăm fila care are același număr, ca și link-ul nostru - și de asemenea să o activăm.