Tab 1 Tab 2 Tab 3

Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.

Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.

Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.

Tab 1 Tab 2

Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.

Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/.js"></script>
<style>
	#TabberDemo02 { margin-top: 50px; }
	.tabber .tabber-handle {
		display: block;
		float: left;
		font-size: 16px;
		line-height: 40px;
		margin: 0 1px 0 0;
		padding: 0 20px;
	}
	.tabber .tabber-handle:hover { text-decoration: none; }
	.tabber .tabber-handle.active {
		background-color: #666666;
		color: #fff;
	}
	
	.tabber .tabber-tab {
		background-color: #666666;
		padding: 20px;
		color: #fff;
	}
	.tabber .tabber-tab p {
		margin: 10px 0;
		line-height: 150%;
	}
	
	.tabber.mobile .tabber-tab { padding-top: 10px; }
	.tabber.mobile .tabber-tab p { margin-top: 0; }
	
	
	#TabberDemo02 .tabber-menu { width: 170px; }
	#TabberDemo02.tabber .tabber-handle {
		width: 150px;
		padding: 0 0 0 20px;
	}
	#TabberDemo02 .tabber-tab {
		width: 710px;
		padding: 0;
	}
	#TabberDemo02 .tabber-tab p {
		padding: 20px;
	}
	
</style>
<script>
    $(window).load(function(){
		$('#TabberDemo01').tabber();
		$('#TabberDemo02').tabber({
			vertical: true
		});
    });
</script>
<div id="TabberDemo01" class="tabber">
	<menu class="tabber-menu">
		<a href="#tab-1-1" class="tabber-handle">Tab 1</a>
		<a href="#tab-1-2" class="tabber-handle">Tab 2</a>
		<a href="#tab-1-3" class="tabber-handle">Tab 3</a>
	</menu>
	<div class="tabber-tab" id="tab-1-1">
		<p>Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.</p>
	</div>
	<div class="tabber-tab" id="tab-1-2">
		<p>Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.</p>
	</div>
	<div class="tabber-tab" id="tab-1-3">
		<p>Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.Tab3 Text.</p>
	</div>
</div>

<div id="TabberDemo02" class="tabber">
	<menu class="tabber-menu">
		<a href="#tab-2-1" class="tabber-handle">Tab 1</a>
		<a href="#tab-2-2" class="tabber-handle">Tab 2</a>
	</menu>
	<div class="tabber-tab" id="tab-2-1">
		<p>Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.Tab1 Text.</p>
	</div>
	<div class="tabber-tab" id="tab-2-2">
		<p>Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text.Tab2 Text</p>
	</div>
</div>

Tabberについて

Tabberはタブメニューを簡単に設置できるプラグインです。
ブレークポイントを設定すればレスポンシブになります。縦方向のタブ切り替えも可能です。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • MeanMenu

    MeanMenu

    レスポンシブメニューを簡単に設置できる

  • FlexibleSlideToTopAccordion

    FlexibleSlideToTopAccordion

    自動で頭出しをしてくれるアコーディオンメニュー

  • Multilevelpushmenu

    Multilevelpushmenu

    横から重なるようにメニューが出てくる

  • Sidr

    Sidr

    横からニュイっと出てくるサイドメニューをお手軽に設置できる

  • ContextMenu1

    ContextMenu1

    右クリックメニューをオリジナルにすることができるプラグインです。