コピペでOK！ jQueryで上下連動タブの切り替えをする方法

2019年1月27日

logo_jquery

今どきVue.jsで簡単にできる物でもありますが、案件によってはjQueryで書く必要があったりするので、上下連動タブの切り替えをする方法をコピペで使えるようにシンプルなコードを備忘録として残しておきます。

See the Pen
【jQuery】超簡単！jQueryで上下連動タブの切り替えをする方法 by hiroy (@hiroya)
on CodePen.

簡単な使い方説明

上下のタブ、表示するコンテンツのHTMLを用意して下記のインスタンス生成時（new TabList部分）に指定している下記のクラスを適宜変更するだけで使用することが可能です！

var syncTab = new TabList('.tab', '.tabContent');
syncTab.fn();

1 2	var syncTab = new TabList('.tab', '.tabContent'); syncTab.fn();

関連記事

2019年1月27日【jQuery】要素にランダムかつ重複なしにクラスを付与する方法
2019年1月27日 javascriptでjQueryの$(this).addClass()と同じ扱いを再現する方法（クリックした要素編）
2019年1月30日超簡単！jsでカウントダウンタイマー（残り〜日）を設置する方法
2019年1月30日【css】文字（テキスト）にborderをつけるように縁取りをする方法
2019年1月30日 jQuery・vue.js不要！javascriptで複数対応のアコーディオンを作成する方法

スポンサードリンク