ページ内にタブメニューを実装「tabs.js」 - jQueryプラグイン
当ページのリンクには広告が含まれています。
スポンサーリンク
ページ内にタブメニューを実装する「tabs.js」を紹介します。
tabs.js
このプラグインは、指定した要素内に ulタグを使ってタブメニューを作成、メニューに付随するコンテンツはdivで実装します。たったこれだけで、ページ内にタブメニューを実装できます。簡単なのでおすすめです。また、シンプルなデザイン構成になっているので、サイトに合わせたカスタマイズも簡単にできます。
スポンサーリンク
デモのタブメニューをクリックして、その挙動を確認してみてください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>tabs.js - jQueryプラグインまとめのカルマ</title>
<script src='https://code.jquery.com/jquery.min.js'></script>
<script src='jquery.tabs.js'></script>
<script>
$(document).ready( function() {
tabify( '#tabs' );
});
</script>
</head>
<body>
<h1>tabs.jsのデモでーす。</h1>
<div id='tabs'>
<ul>
<li>タブ①</li>
<li>タブ②</li>
<li>タブ③</li>
<li>タブ④</li>
<li>タブ⑤</li>
</ul>
<div>
タブをクリックしてください。<br /><br />
タブ<br />
タプ
</div>
<div>
タブをクリックしてください。<br /><br />
タブタブ<br />
タプタプ
</div>
<div>
タブをクリックしてください。<br /><br />
タブタブタブ<br />
タプタプタプ
</div>
<div>
タブをクリックしてください。<br /><br />
タブタブタブタブ<br />
タプタプタプタプ
</div>
<div>
タブをクリックしてください。<br /><br />
タブタブタブタブタブ<br />
タプタプタプタプタプ
</div>
</div>
</body>
</html>
jsファイルのダウンロードやその他詳細はこちらからどうぞ。
» tabs.js
スポンサーリンク