うっかりタブの中身を盗まれるjQueryタブプラグイン jDTTabs.js

みなさん、ルパンは好きですか？もちろんルパンⅢ世です。嫌いな人はいないと思います。そんなルパンにタブの中身を盗まれてみませんか？とっつぁんもついてくるよ。

Live demo
Download demo files

導入方法

1. jQueryとjDTTabsを読み込む

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jdttabs.js"></script>

2. タブのHTMLを用意する

タブのHTMLは以下のようにします。

<div id="jdtTabs">
  <ul class="tab">
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
    <li><a href="#tab3">tab3</a></li>
    <li><a href="#tab4">tab4</a></li>
    <li><a href="#tab5">tab5</a></li>
  </ul>
  
  <div id="tab1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div id="tab2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <div id="tab3">ccccccccccccccccccccccccccccccccccccccccccccccccc<br />
  ccccccccccccccccccccccccccccccccccccccccccccccccc<br />
  ccccccccccccccccccccccccccccccccccccccccccccccccc<br />
  ccccccccccccccccccccccccccccccccccccccccccccccccc<br />
  ccccccccccccccccccccccccccccccccccccccccccccccccc</div>
  <div id="tab4">ddddddddddddddddddddddddddddddddddddddddddddddddd<br />
  ddddddddddddddddddddddddddddddddddddddddddddddddd<br />
  ddddddddddddddddddddddddddddddddddddddddddddddddd<br />
  ddddddddddddddddddddddddddddddddddddddddddddddddd<br />
  ddddddddddddddddddddddddddddddddddddddddddddddddd</div>
  <div id="tab5">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br />
  eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br />
  eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br />
  eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br />
  eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</div>

3. 実行する

$()で対象にする要素を指定します。

jQuery(function($) {
  $('#jdtTabs').jdtTabs();
});

オプション

やってやった感を演出。

オプション項目	内容
steal	クールに決めよう。
stole	悔しがろう。

Live demo
Download demo files

注意

俺に盗めないものなんてないんだぜ？