今日の人気記事

  1. マウスオーバーで画像を拡大(ズーム)「EasyZoom」
  2. ExcelのようにTableが編集できちゃう「Handsontable」
  3. 画像の拡大・縮小と移動(パン)「pan and zoom 」
  4. 画像スライドショー「Bare Bones Slider」豊富なオプションで簡単設定!
  5. 指定した数値から折れ線グラフを描画「SimpleChart」

ページ内にタブメニューを実装「tabs.js」 - jQueryプラグイン

スポンサーリンク

ページ内にタブメニューを実装する「tabs.js」を紹介します。

tabs.js

このプラグインは、指定した要素内に ulタグを使ってタブメニューを作成、メニューに付随するコンテンツはdivで実装します。たったこれだけで、ページ内にタブメニューを実装できます。簡単なのでおすすめです。また、シンプルなデザイン構成になっているので、サイトに合わせたカスタマイズも簡単にできます。

スポンサーリンク

デモのタブメニューをクリックして、その挙動を確認してみてください。

「tabs.js」のデモ

ソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>tabs.js - jQueryプラグインまとめのカルマ</title>
<script src='http://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

スポンサーリンク

関連記事(一部広告含む)