タブ

tab

使い方

(1)タブ自体を設定する

<div class="tab">
  <div class="tab__inner">
    <button type="button" data-tab-group="animal" data-tab-target="dog" class="is-active">犬</button>
    <button type="button" data-tab-group="animal" data-tab-target="cat">猫</button>
    <button type="button" data-tab-group="animal" data-tab-target="bird">鳥<br>テキストテキストテキスト</button>
  </div>
</div>

(2)タブによって制御されるコンテンツを設定する

制御先の要素に対しclassを設定する。
classはjs-tab-{タブグループ名}-{タブ選択肢名}とする。
{タブグループ名}はタブ自体のHTMLのdata-tab-groupで指定した値を、
{タブ選択肢名}はタブ自体のHTMLのdata-tab-targetで指定した値を入れる。

補足

タブのbuttonタグにclass="is-active"を設定しておくと、ページロード後にそのタブを開くようにさせれる

特定のタブを開いた状態でページ遷移するようにリンク設定する

設定内容は以下の通り。

  • aタグにclassでjs-link-tabを追加する
  • href属性のURLに?tab={タブグループ名},{タブ選択肢名}のパラメータを持たせる。

なお、ページ内リンクも同時に設定することで、タブを開かせつつタブの中の任意の要素に自動スクロールさせるようにすることもできる
/wae/tab/?tab=animal,cat#cat

猫タブを開いた状態でページ遷移させるサンプル（別タブ）

猫タブを開いた状態でページ遷移させるサンプル（同一タブ）

セクションに対し「js-tab-animal-dog」を設定しています

猫について

セクションに対し「js-tab-animal-cat」を設定しています

セクションに対し「js-tab-animal-bird」を設定しています

セクションに対し「js-tab-fruit-apple」を設定しています

セクションに対し「js-tab-fruit-orange」を設定しています

セクションに対し「js-tab-fruit-banana」を設定しています

セクションに対し「js-tab-fruit-kiwi」を設定しています