Slick Tabbed Content Area


Description: シンプルでクロスブラウザにも対応した汎用的なタブメニューです。縦のアニメーションスライドで切り替わります。マークアップもコードも簡単で使いやすいですね。
Sample: demo
Tutorial: Create a Slick Tabbed Content Area using CSS & jQuery
License: -

Sample

Note

  // When the document loads do everything inside here ...
	  $(document).ready(function(){

		// When a link is clicked
		$("a.tab").click(function () {

			// switch all tabs off
			$(".active").removeClass("active");

			// switch this tab on
			$(this).addClass("active");

			// slide all content up
			$(".content").slideUp();

			// slide this content up
			var content_show = $(this).attr("title");
			$("#"+content_show).slideDown();

		});

	  });

jQueryと上記コードで動作します

Related snippet :

  • Description: シンプルなマルチレベルドロップダウンメニューです。クロスブラウザで動作します。アニメーションもなく、汎用的で最も使いやすいかもしれません。 ...
  • Description: ドロップダウンするシンプルなグローバルメニューです。2段目からはサイドアウトしますよ。クロスブラウザにも対応しています。 Sample: ...
  • Description: 動的にタブを生成するプラグインです。タブはページ推移無しでコンテンツを切り替えることが可能です。クロスブラウザ対応ですが、IE6だけ多少cssハ ...
  • Description: スライドするタブメニューです。条件分岐でIE用のcssを用意してクロスブラウザ対応させています。少しリッチなUIにしたい、という時にこうしたエフェク ...
  • Description: 簡単なコードで実装できる開閉アコーディオンです。Toggleメソッドの基本的な使い方です。テキストをクリックすると隠れたコンテンツが表示されます。 ...
  • Description: シンプルでベーシックなドロップダウンメニューです。簡単なアニメーション付きで、クロスブラウザ対応です。最もよく見るタイプのメニューですね。 ...
  • Description: バー全体が降りてくるタイプのドロップダウンメニューです。横並びに羅列されるので、下部コンテンツを邪魔することもありません。クロスブラウザで動作します ...