あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】タブ機能付きスライダーの実装方法

【jQuery】タブ機能付きスライダーの実装方法

スポンサーリンク

この記事は2016年2月2日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

情報量が多いサイトだとよく使用される「タブ切り替え」のスクリプト。
実務ではシステムが組み入れてある「旅行予約サイト」や「不動産サイト」などでよく使います。

過去には特殊なケースで「タブの機能とスライダーを組み合わせた機能がほしい」という要望を受けたことがありました。
今回はその「タブスライダー」を実装する方法について解説していきたいと思います。

タブ機能付きスライダーの実装方法

「Qiita」でタブ機能付きスライダーのjQueyプラグインを作成し、公開されていた方がいらっしゃたので参考にさせていただきました。
http://qiita.com/kamem/items/bb11e8b8027b7b5c44be
http://qiita.com/kamem/items/94e974a0212396d97ed7

「tab.js」と「dataExtend.js」を組み合わせることでタブの切り替えにスライダーを動きをつけることが簡単にできます。
優秀なプラグインで動かすのに必要な記述はたったこれだけです。実に良くできたプラグインです。

$(function(){
    $('.nav-tab').dataExtend('tab');
});

スポンサーリンク