TabbedContent

JavaScript

HTML5のhistory APIを使用したタブメニューを実装できる「TabbedContent」

TabbedContentはHTML5のhistory APIを使用した軽量のタブメニューを実装することができるjQuery(Zepto)プラグインです。タブメニューをクリックすることで履歴が追加されていくので、ブラウザの「戻る・進む」ボタンを押してもページ全体の更新ではなくタブコンテンツのみが切り替わります。

TabbedContent

デモ

デザインはとてもシンプルで無駄なアニメーションが一切ないのでサクサク動作しますね。プラグイン自体も軽量なのでPC・スマフォともに使い勝手もよさそうです。

デモ(Bootstrap)

基本的な使い方はとても簡単で、以下のようにマークアップして、

<ul>
    <li><a href="#tab-1">タブ1</a></li>
    <li><a href="#tab-2">タブ2</a></li>
    <li><a href="#tab-3">タブ3</a></li>
    <!-- 中略 -->
</ul>
<div class="tabscontent">
    <div id="tab-1">
        <!-- コンテンツ1 -->
    </div>
    <div id="tab-2">
        <!-- コンテンツ2 -->
    </div>
    <div id="tab-3">
        <!-- コンテンツ3 -->
    </div>
    <!-- 中略 -->
</div>

TabbedContentを初期化してあげるだけです。

$('.tabscontent').tabbedContent();

TabbedContent

関連記事

  1. jQuery ui material design datepicker
  2. no-image
  3. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  4. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  5. no-image

    JavaScript

    フレキシブルでモバイルフレンドリーなフォトギャラリー実装「jGallery」

    jGalleryは、フレキシブルでモバイルフレンドリーなフォトギャラリ…

  6. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP