Záložky v JavaScripte

Teraz implementujeme záložky. Okamžite si pozrite ukážku toho, čo sa od vás vyžaduje:

Preštudujte si aj HTML a CSS, na ktorom budeme riešiť úlohu:

html<div id="parent">
  <div class="menu">
    <a href="" class="active">záložka 1</a>
    <a href="">záložka 2</a>
    <a href="">záložka 3</a>
  </div>
  <div class="tabs">
    <div class="tab active">
      text záložky 1
    </div>
    <div class="tab">
      text záložky 2
    </div>
    <div class="tab">
      text záložky 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;
}

Všimnite si, že aktívny odkaz a aktívna záložka majú triedu active.

Diskusia

Poďme teraz diskutovať o tom, ako vyriešiť túto úlohu. Je zrejmé, že treba nejako spojiť odkazy s im príslušnými záložkami. V tejto lekcii z teoretickej učebnice sme už rozoberali možné varianty.

V tomto prípade navrhujem spojiť odkazy a záložky jednoducho podľa pozície: prvý odkaz otvorí prvú záložku, druhý odkaz - druhú záložku atď.

Všeobecný algoritmus bude vyzerať takto: po kliknutí na tlačidlo musíme nájsť odkaz s triedou a odobrať mu túto triedu. Podobným spôsobom musíme nájsť záložku s touto triedou a tiež jej túto triedu odobrať.

Potom musíme vziať odkaz, na ktorý bol kliknutý a aktivovať ho. Potom musíme vziať záložku, ktorá má rovnaké číslo, ako náš odkaz - a tiež ju aktivovať.