jQueryUIでタブを表示する

2015.04.16

jQueryUIでタブを表示する

jQueryUIでタブを表示します。

まずjqueryとjquery-ui.min.js、jquery-ui.cssをプリロードします。

<script src="http://code.jquery.com/jquery.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<link type="text/css" href="../css/jquery-ui.css" rel="stylesheet" />

タブのオプションです。

eventactivate,beforeActivate,beforeLoad,load,create
collapsible数値（0,1,2…の順で指定、0が一番左）
activetrue or false

1.10からselected→activeに変わっています。

以下、body部分です。

<body>
<!– コーディング部分 –>
<script type=”text/javascript”>
$(function(){
$(“#tabs”).tabs({
active:1,
collapsible:true,
activate: function(event, ui) {
console.log(ui.newPanel.context.id);
}
});
});
</script>

<!– タブヘッダー –>
<div id=”tabs”>
<ul>
<li><a href=”#1″>見出し1</a></li>
<li><a href=”#2″>見出し2</a></li>
<li><a href=”#3″>見出し3</a></li>
</ul>

<!– タブコンテンツ –>
<div id=”1″>
見出し1の内容～<br/>
見出し1の内容～<br/>
</div>
<div id=”2″>
見出し2の内容～<br/>
見出し2の内容～<br/>
</div>
<div id=”3″>
見出し3の内容～<br/>
見出し3の内容～<br/>
</div>
</div>
</body>

タブを表示するには、divでul要素内にaタグを記述した箇所を囲みます。

href属性に紐づいたdiv要素がタブ内のコンテンツになります。

DEMO

jquery.uiの詳細はこちらをどうぞ。

jQueryUIでアコーディオンを表示する

コメント

タイトルとURLをコピーしました