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

