フェード効果のタブ jQuerytabs

Javascript Sourceで配布されている Jquerytabs v2.7.4（Oct 8, 2011, under the MIT and GPL licenses）を改変し、/assets/js/tabs.min.js と /assets/css/tabs.min.css に保存した。

jQuery v1.0.3 (2006) 必須（jQuery v1.8.1動作確認済み）
tabs.min.js (5.4kb)
オリジナルに含まれていた"history support and bookmarking"のスクリプトを削除し、デフォールトをアニメーション効果を指定した下記コードを追加した。
$(function() { $('#myTabs').tabs({ fxSlide: false, fxFade: true, fxSpeed: 'normal' });});
※複数のタブグループを書くときは、myTabsを別名で追加すれば可能。
tabs.min.css (1.8kb)
本文に書くクラス名：tabs-nav、タブの背景：img/tab.png

one 写真

two 動画

three 地図

追加タブグループの例

<link rel="stylesheet" type="text/css" href="/assets/css/tabs.min.css">
<script type="text/javascript" src="/assets/js/tabs.min.js"></script>
<script>$(function() { $('#myTab2').tabs({ fxFade: true });});</script>
<div id="myTab2">
  <ul class="tabs-nav">
   <li class="tabs-selected"><a href="#a"><span>写真</span></a></li>
   <li class=""><a href="#b"><span>動画</span></a></li>
   <li class=""><a href="#c"><span>地図</span></a></li>
  </ul>
  <div class="tabs-hide" id="a"><img src="/assets/img/001.jpg"></div>
  <div class="tabs-hide" id="b"><img src="/assets/img/002.jpg"></div>
  <div class="tabs-hide" id="c"><img src="/assets/img/003.jpg"></div>
 </div><!-- myTab2 -->