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

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

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

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

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

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

この記事を書いた人（著者情報）

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。