【Javascript】jQuery UI タブ

      $('#jqtab-example1 > ul')
          .tabs({ fxFade: true, fxSpeed: 'fast' });

  <script type="text/javascript">
   $(function() {
      $('#jqtab-example2 > ul').tabs({fxFade:true,fxSpeed:'fast'});
   });
  </script>
  
  <div id="jqtab-example2">
    <ul>
      <li><a href="#tab2-1"><span>JavaScript</span></a></li>
      <li><a href="#tab2-2"><span>解説</span></a></li>
      <li><a href="#tab2-3"><span>リンク</span></a></li>
    </ul>

    <div id="tab2-1">
      $('#jqtab-example1 > ul')<br>
          .tabs({ fxFade: true, fxSpeed: 'fast' });
    </div>

    <div id="tab2-2">
     メソッドtabsの引数から、フェイドエフェクトfxFadeと
     エフェクトスピードfxSpeed
     ("slow", "normal", "fast" ,またはミリ秒) を指定しています。
    </div>

    <div id="tab2-3">
     ソース
    </div>
  </div>
     

      $('#jqtab-example3 > ul').tabs({ fxSlide: true });

  <script type="text/javascript">
   $(function() {
      $('#jqtab-example3 > ul').tabs({ fxSlide: true });
   });
  </script>

  <div id="jqtab-example3">
    <ul>
      <li><a href="#tab3-1"><span>jQuery</span></a></li>
      <li><a href="#tab3-2"><span>解説</span></a></li>
      <li><a href="#tab3-3"><span>ソース</span></a></li>
    </ul>

    <div id="tab3-1">
    <pre class="pro-source">
   $(function() {
      $('#jqtab-example3 > ul').tabs({ fxSlide: true });
   });</pre>
    </div>

    <div id="tab3-2">
メソッドtabsの引数から、スライドエフェクトfxSlideを指定しています。 
    </div>

    <div id="tab3-3">
     ソース
    </div>
  </div>

     $('#jqtab-example4 > ul').tabs({ cache: false });

  <script type="text/javascript">
   $(function() {
      $('#jqtab-example4 > ul').tabs({ cache: false });
   });
  </script> 

  <div id="jqtab-example4">
    <ul>
      <li><a href="#tab4-1"><span>jQuery</span></a></li>
      <li><a href="./test2.txt"><span>Ajaxロードサンプル1</span></a></li>
      <li><a href="./test3.txt"><span>Ajaxロードサンプル2</span></a></li>
      <li><a href="#tab4-2"><span>解説</span></a></li>
      <li><a href="#tab4-3"><span>ソース</span></a></li>
    </ul>

    <div id="tab4-1">
    <pre class="pro-source">
     $('#jqtab-example4 > ul').tabs({ cache: false });</pre>
    </div>

    <div id="tab4-2">
a要素のhref属性へ、読み込みたいテキストファイルを指定するだけです。<br>
例:<li><a href="./test2.txt"><span>Ajaxロードサンプル1</span></a></li><br>
Ajaxロードサンプル2はimgタグを書いたファイルを読み込んでいます。
    </div>

    <div id="tab4-3">
<pre class="pro-source">ソース</pre>
    </div>
  </div>