jQuery-UI タブ
//タブ・パネル全体を定義
<div id=”tabs”>
//タブ・リストを定義
※リンクをクリックすると下の各<div>へジャンプする
<ul>
<li><a href=”#tab1″>tab1</a></li>
<li><a href=”#tab2″>tab2</a></li>
<li><a href=”#tab3″>tab3</a></li>
<li><a href=”#tab4″>tab4</a></li>
<li><a href=”#tab5″>tab5</a></li>
</ul>
//パネル本体を定義
<div id=”tab1″>
<p>1行目</p>
</div>
<div id=”tab2″>
<p>1行目</p>
<p>2行目</p>
</div>
<div id=”tab3″>
<p>1行目</p>
<p>2行目</p>
<p>3行目</p>
</div>
<div id=”tab4″>
<p>1行目</p>
</div>
<div id=”tab5″>
<p>1行目</p>
</div>
</div>
<script type=”text/javascript”>
$(function() {
$(‘#tabs’).tabs({
//デフォルトで開くタブ(0から数える)
active: 1,
//選択不可(0から数える)
disabled: [3,4],
event: ‘click’, ※’mouseover’ / ‘click'(Default)
heightStyle: ‘auto’ ※auto/fill/content
‘auto’ :最大行に合わせる
‘fill’ :固定
‘content’ :タブ毎に可変(Default)
});
});
</script>