Slide and Fade Effect Combined

※Javascript Sourceで配布されているJquerytabs（Oct 8, 2011）はタブ切り替えにアニメーション効果などを付加している。
オリジナルに含まれていた"history support and bookmarking"を削除し、jtab2.7.4.js とした。

Use a combined slide and fade effect to switch tabs:

$('#myTabs').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });

Javascript

jquery_002.jsは不要なので、jquery-1.jsとjquery.jsを統合して jtabs.js (27KB)にした。

CSS

二番目のタブ

 <div id="myTabs">
  <ul class="tabs-nav">
   <li class="tabs-selected"><a href="#one"><span>One</span></a></li>
   <li class=""><a href="#two"><span>Two</span></a></li>
   <li class=""><a href="#three"><span>三番目</span></a></li>
  </ul>
  <div class="mytab tabs-hide" id="one">
   <p>・・・</p>
  </div>
  <div class="mytab tabs-hide" id="two">
   <p>・・・</p>
  </div>
  <div class="mytab tabs-hide" id="three">
   <p>・・・</p>
  </div>

三番目のタブ

三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目三番目

〔例２〕

ID名を変えて複数タブセットを書ける。

$('#myTab2').tabs({ fxSlide: false, fxFade: true, fxSpeed: 'slow' });

動画

Flowplayerを使う

地図

Google MapsとYahoo!RouteLabを使う