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. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

  2. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

  3. JavaScript

    jQuery MobileでWebサイトをスマートフォン対応にする時に見ておきたい記事のまとめ

    今更ながらようやくjQuery Mobileを使い始めたんですが、基本…

  4. PreViewTube.js
  5. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

  6. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP