jQuery Accessible Tabs


Description: フェードエフェクトで切り替わるタブメニューを実装するプラグイン。クロスブラウザ対応していますが、cssの調整が必要です。
Sample: demo
Tutorial: jQuery Accessible Tabs – How to make tabs REALLY accessible / Download
License: -

Note

   $(document).ready(function(){
            var tabs = $(".tabs").accessibleTabs({
                tabhead:'h2',
                fx:"fadeIn",
                syncheights:true
            });
            $("a[href=#dummy-text]").click(function(e){ // make a link that points to #dummy-text open a tab
                e.preventDefault(); // avoid the jumping of the page when clicking the anchor
                tabs.showAccessibleTab(1); //tabs indexes start with 0
            });
        });

必要なファイルを読み込んでから上記を設定します。

Related snippet :

  • Description: 動的にタブを生成するプラグインです。タブはページ推移無しでコンテンツを切り替えることが可能です。クロスブラウザ対応ですが、IE6だけ多少cssハ ...
  • Description: シンプルなコードで実装出来るタブコンテンツです。エフェクトもなく、汎用性も高いですね。クロスブラウザで動作します。 Sample: de ...
  • Description: AJAXを使ったタブメニューです。マークアップがとてもシンプルになります。タブはhtmlを読み込む形のようです。css3を使いますが、表示以外はIE ...
  • Description: アニメーションとフェードイン・アウトを取り入れたベーシックなタブメニューです。IE6でも動きますが、罫線が消えてしまうので対策が必要です。 ...
  • Description: シンプルなイメージリストを実装するイメージナビゲーションです。プロダクトの紹介など、コーポレートサイトやECサイトなどで使えそうですね。オート再生、 ...
  • Description: シンプルなタブコンテンツです。アニメーションエフェクト有りと無しを選べますよ。クロスブラウザにも対応しており、div要素を切り替えるので汎用性も高い ...
  • Description: シンプルでクロスブラウザにも対応した汎用的なタブメニューです。縦のアニメーションスライドで切り替わります。マークアップもコードも簡単で使いやすいです ...