JavaScriptでのタブ

では、タブを実装しましょう。 まず、求められているもののサンプルを見てください：

また、タスクを解決するためのマークアップも確認してください：

html<div id="parent">
  <div class="menu">
    <a href="" class="active">タブ 1</a>
    <a href="">タブ 2</a>
    <a href="">タブ 3</a>
  </div>
  <div class="tabs">
    <div class="tab active">
      タブ1のテキスト
    </div>
    <div class="tab">
      タブ2のテキスト
    </div>
    <div class="tab">
      タブ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;
}

アクティブなリンクとアクティブなタブにはクラス active が付いていることに注意してください。

解説

では、このタスクの解決方法について説明しましょう。明らかに、リンクと対応するタブを何らかの方法で関連付ける必要があります。この理論書のレッスンでは、可能なオプションについて既に検討しました。

今回の場合、リンクとタブを単純に位置で関連付けることを提案します：最初のリンクは最初のタブを開き、2番目のリンクは2番目のタブを開き、以下同様です。

一般的なアルゴリズムは次のようになります：ボタンがクリックされると、そのクラスを持つリンクを見つけてクラスを削除する必要があります。同様に、このクラスを持つタブを見つけて、そのクラスも削除する必要があります。

次に、クリックされたリンクを取得してアクティブにします。その後、リンクと同じ番号を持つタブを取得して、それもアクティブにします。