様々なタブの切り替えを簡単に実装!Tabsletを使おう

  • はてブ

割と使うタブの切り替え。
単純なものであれば自分でもコードを覚えれば書けないこともないのですがもうちょっと様々な効果を使ってみたい…なんて時もあります。
そんな時に役立つのが『Tabslet』です。

使い方

img
とりあえずダウンロードしましょう。下記サイトから『DOWNLOAD』ボタンでダウンロードしてください。
ダウンロード後はcssとjsを読み込ませます。
ダウンロードしたフォルダにある『jquery.tabslet.js』とdemo>stylesheetsフォルダ内の『styles.css』を読み込ませましょう。


cssは読み込ませた後に自分で修正などしたりするのが無難かと思います。

読み込ませたら以下のようにカスタマイズしてみましょう。

通常のタブ

DEMO

ごくごく普通のタブです。
とりあえずTabsletは

  • タブ部分にidを振る
  • ボタンになるところにタブのidをリンクさせる
  • 上記2つをクラスを付けたdiv等で囲い、そこにスクリプトの指定を行う
でタブとして動いてくれます。


アクティブの指定をデフォルトでする


DEMO

該当の数字を指定するとタブをデフォルトを1番目以外にできます。
今回は『active: 2』を指定することで2番目のタブをデフォルトで最初に表示してくれています。


hoverだけで開くタブ


DEMO

マウスをのせるだけで開いてくれるタブを実装できます。
ちなみに『attribute: ‘href’』の記述があるのでこれを使用するとクリックをした時にはURLに直接idを振ってくれます。


タブにフェードのアニメーションを付ける


DEMO

この方法でタブにフェードのアニメーションを付けながら切り替えることができます。


style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">



自動でタブを切り替える


DEMO

自動でタブを切り替えることができます。
delayの値を変更することで速度も変えることができます。


コントローラーを付ける


DEMO

コントローラーを付けることができます。
prevなどに該当のボタンのクラスを指定させてください。


タブの切り替え時にアラートをだす


DEMO

タブの切り替え時にアラートをだすことができます。
alert()内のテキストは好きに変更してください。


タブの切り替え後にアラートをだす


DEMO

こちらはタブの切り替え後にアラートを出すことができます。
alert()内のテキストは好きに変更してください。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ