Simple jQuery tabs


Description: シンプルなコードで実装出来るタブコンテンツです。エフェクトもなく、汎用性も高いですね。クロスブラウザで動作します。
Sample: demo
Tutorial: Simple jQuery tabs
License: -

Sample

タブ1のコンテンツがここに入ります。 タブ1のコンテンツがここに入ります。タブ1のコンテンツがここに入ります。タブ1のコンテンツがここに入ります。タブ1のコンテンツがここに入ります。タブ1のコンテンツがここに入ります。タブ1のコンテンツがここに入ります。

タブ2のコンテンツはここです。タブ2のコンテンツはここです。タブ2のコンテンツはここです。タブ2のコンテンツはここです。

ここにタブ3。
ここにタブ3。
ここにタブ3。
ここにタブ3。
ここにタブ3。
ここにタブ3。
ここにタブ3。ここにタブ3。ここにタブ3。ここにタブ3。

タブ4のコンテンツです

Note

$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});

jQueryと上記コードで実装出来ます。class等は便宜変更してください。

Related snippet :

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