Záložky v JavaScriptu

Nyní implementujeme záložky. Okamžitě se podívejte na ukázku toho, co je požadováno:

Prostudujte také značkování, na kterém budeme řešit ú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šimněte si, že aktivní odkaz a aktivní záložka mají třídu active.

Diskuse

Pojďme nyní diskutovat o tom, jak tuto úlohu řešit. Je zřejmé, že je třeba nějak propojit odkazy s odpovídajícími záložkami. V této lekci z teoretické učebnice jsme již rozebírali možné varianty.

V tomto případě navrhuji propojit odkazy a záložky jednoduše podle pozice: první odkaz bude otevírat první záložku, druhý odkaz - druhou záložku atd.

Obecný algoritmus bude vypadat takto: po kliknutí na tlačítko musíme najít odkaz s třídou a odstranit jí tuto třídu. Stejným způsobem musíme najít záložku s touto třídou a jí také tuto třídu odstranit.

Poté musíme vzít odkaz, na který došlo ke kliknutí a aktivovat jej. Poté musíme vzít záložku, která má stejné číslo, jako náš odkaz - a také ji aktivovat.