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

ReadRemaining.js記事を読むのにかかる時間を教えてくれるjQueryプラグイン「ReadRemaining.js」前のページ

シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」次のページjQuery toTop()

関連記事

  1. Gradientify

    JavaScript

    シンプルなCSSグラデーション変化を実装できる「Gradientify」

    GradientifyはシンプルなCSSグラデーション変化を実装するこ…

  2. scrollama.js

    JavaScript

    スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」

    scrollama.jsは、スクロールイベントを実装することができるモ…

  3. Responsive overlay menu

    JavaScript

    美しいオーバーレイメニューを実装できる「Responsive overlay menu」

    Responsive overlay menuはレスポンシブに対応した…

  4. Vertical Timeline

    JavaScript

    垂直型のシンプルなタイムラインを実装できるjQueryプラグイン「Vertical Timeline…

    Vertical Timelineは、垂直型のシンプルなタイムラインを…

  5. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  6. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP