A Tabbed Interface


Description: シンプルなタブコンテンツです。アニメーションエフェクト有りと無しを選べますよ。クロスブラウザにも対応しており、div要素を切り替えるので汎用性も高いです。
Sample: demo
Tutorial: Create A Tabbed Interface Using jQuery
License: -

Sample

このようにdiv要素を切り替えるのでテキストでも問題ないです。

もちろん画像でもOK

Note

$(document).ready(function() {
	$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
	$('#featuredvid > ul').tabs();
});

jQueryとプラグインを読み込んで上記設定をするだけ。

Related snippet :

  • Description: オンマウスでフェードエフェクトをかけながら画像を切り替えます。cssスプライト使用。シンプルなエフェクトですが、クロスブラウザにも対応しており、目を ...
  • Description: クロスブラウザで画像不使用の角丸コンテンツを実装するプラグインです。非常に軽量で使いやすいかと思います。 Sample: demo ...
  • Description: iGoogleのようにコンテンツをドラッグ&ドロップで動かせるインターフェースを実装できます。クロスブラウザで動作してくれるので管理画面などにもいい ...
  • Description: タブメニューにマウスを乗せるだけでコンテンツを切り替えます。IE6だけ表示が崩れるので対策が必要です。使い勝手はとても良いのでうまく使っていきたいで ...
  • Description: ページ内アンカーリンクをグラフィカルな目次にして表示します。縦長のページ内の目次として使うことができそうですね。jQueryUIを必要とします。 ...
  • Description: Youtubeのプレイリストをサムネイル表示し、その場で再生可能にするプラグインです。クロスブラウザで動作可能。サイズも簡単に変更できるようです。な ...
  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...