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

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

  • ContextMenu2

    ContextMenu2

    右クリックのメニューをオリジナルなものに変更できる

  • ContextMenu1

    ContextMenu1

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

  • WheelMenu

    WheelMenu

    マウスオーバーした要素を中心にメニューが円状に配置されるプラグイン

  • Multilevelpushmenu

    Multilevelpushmenu

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