Sweet AJAX Tabs


Description: AJAXを使ったタブメニューです。マークアップがとてもシンプルになります。タブはhtmlを読み込む形のようです。css3を使いますが、表示以外はIE6や7でも概ね問題ありません。
Sample: demo
Tutorial: Sweet AJAX Tabs With jQuery 1.4 & CSS3
License: 個人商用OKだけど、再配布や販売は不可

Note

<div id="main">

<ul class="tabContainer">
<!-- The jQuery generated tabs go here -->
</ul>

<div class="clear"></div>

<div id="tabContent">
	<div id="contentHolder">
    	<!-- The AJAX fetched content goes here -->
    </div>
</div>

</div>

非常に簡単なマークアップです。読み込むページはjs内に書きます。

var Tabs = {
		'Tab one'	: 'pages/page1.html',
		'Tab two'	: 'pages/page2.html',
		'Tab three'	: 'pages/page3.html',
		'Tab four'	: 'pages/page4.html'
	}

Related snippet :

  • Description: フェードエフェクトで切り替わるタブメニューを実装するプラグイン。クロスブラウザ対応していますが、cssの調整が必要です。 Sample: ...
  • Description: 動的にタブを生成するプラグインです。タブはページ推移無しでコンテンツを切り替えることが可能です。クロスブラウザ対応ですが、IE6だけ多少cssハ ...
  • Description: アニメーションとフェードイン・アウトを取り入れたベーシックなタブメニューです。IE6でも動きますが、罫線が消えてしまうので対策が必要です。 ...
  • Description: リアルタイムでTwitterのつぶやきを取得します。AjaxとAPIを使って最新のTwitterのポストを読み込み、フェードで切り替わっていきます。 ...
  • Description: 全画面をギャラリーとして使うプラグイン。左サムネイルで大きな画像を切り替えます。マウスの動きに合わせてサイドスライド、全画面に画像を表示します。その ...
  • Description: シンプルなイメージリストを実装するイメージナビゲーションです。プロダクトの紹介など、コーポレートサイトやECサイトなどで使えそうですね。オート再生、 ...
  • Description: マウスオーバーで隠れていた子リストが上から表示されます。消すには×を押す必要があります。クロスブラウザで動作してくれるので、少し変わったUIにしたい ...