[JS]タブの機能性のみを追求したフレキシブルな超軽量スクリプト -EasyTabs

スムーズなアニメーションでタブを切り替え、各タブコンテンツの#リンクにも対応した、タブの機能性のみを追求したjQueryのプラグインを紹介します。

デモのキャプチャ

JQuery EasyTabs Plugin
デモページ:同じページに複数のタブを設置

[ad#ad-2]

EasyTabsの主な特徴

  • タブの切り替え時にはスムーズなアニメーションが可能
  • 外観はCSSで簡単にカスタマイズ可能
  • ブラウザのバックボタンとフォワードボタンに対応
  • 各タブは#リンクが有効でブックマークが可能(SEOにフレンドリー)
  • タブは指定された時間で自動切り替え可能
  • グローバル変数の使用はしていません
  • ページ内に複数のタブコンテンツを設置可能
  • valid HTML Markup
  • 超軽量(5KB)
  • オープンソース(MIT and GPL licenses)
  • タブのスタイリングはCSSでもJavaScriptでも可能
  • AJAXコンテンツにも対応

[ad#ad-2]

EasyTabsのデモ

デモは複数用意されていますが、どれもリッチなデザインは適用されていないシンプルなものとなっています。

デモのキャプチャ

デモページ:同じページに複数のタブを設置:通常のタブ(アニメーション付き)

デモのキャプチャ

デモページ:同じページに複数のタブを設置:自動切り替えのタブ(アニメーション付き)

デモのキャプチャ

デモページ:同じページに複数のタブを設置:垂直方向のタブ

また、タブとコンテンツを切り離して、設置することも可能です。
※間に他のコンテンツの設置も可能です。

サイトのキャプチャ

デモページ:コンテンツと切り離したタブ

sponsors

top of page

©2018 coliss