jQuery 、jQuery UI の Tabsプラグイン を使用して、タブ型コンテンツを表示します。

対象プラグインを、下記より入手してください。
* jQuery
* jQuery UI

サンプル

サンプルサンプルサンプルサンプル
サンプルサンプルサンプルサンプル
サンプルサンプルサンプルサンプル
サンプルサンプルサンプルサンプル
サンプルサンプルサンプルサンプル
サンプルサンプルサンプルサンプル
 

サンプルソース

JavaScript + CSS

<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/ui.core.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/ui.tabs.js"></script>
<link rel="stylesheet" type="text/css"
         href=" http://www.strollnet.com/js/jquery/css/black-tie/jquery-ui-1.7.2.custom.css" />

<script type="text/javascript">
<!--
   $(function() {
      $('#tabs').tabs({deselectable: true});
   });
//-->
</script>

HTML

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">タブ1</a></li>
      <li><a href="#tabs-2">タブ2</a></li>
      <li><a href="#tabs-3">タブ3</a></li>
   </ul>
   <div id="tabs-1">本文1</div>
   <div id="tabs-2">本文2</div>
   <div id="tabs-3">本文3</div>
</div>
カテゴリ: JavaScript 2010/04/18 6:55

コメントをどうぞ