使い方
(1)タブ自体を設定する
セクションを1つ追加し、オプションメニューを開いて「HTML」をクリックする。
そうするとセクションにHTMLが記述できるようになるので、タブのHTMLを記述する
(2)タブによって制御されるコンテンツを設定する
制御先の要素のセクション、もしくは段に対しclassを設定する。
classは「js-tab-{タブグループ名}-{タブ選択肢名}」とする。
{タブグループ名}はタブ自体のHTMLの「data-tab-group」で指定した値を、
{タブ選択肢名}はタブ自体のHTMLの「data-tab-target」で指定した値を入れる。
補足
タブのbuttonタグに最初にclass=”active”を設定しておくと、ページロード後にそのタブを開くようにさせれる
タブ1、選択肢1の中身
段に対し「js-tab-1-1」を設定しています
タブ1、選択肢2の中身
段に対し「js-tab-1-2」を設定しています
タブ1、選択肢3の中身
段に対し「js-tab-1-3」を設定しています
タブ2、選択肢1の中身
セクションに対し「js-tab-2-1」を設定しています
タブ2、選択肢2の中身
セクションに対し「js-tab-2-2」を設定しています
タブ2、選択肢3の中身
セクションに対し「js-tab-2-3」を設定しています