jQuery UI タブのサンプル(Tabs)

jQuery UIのタブのサンプルです。
Tabs Widgetを使用します。

Tabs Widget

  • jQuery UIのライブラリです。
  • タブをクリックすることで内容を切り換えることができます。
  • jquery.min.jsに加えてjquery-ui.min.jsとjquery-ui.cssを追加します。
  • 以下はjQuery UIのTabs Widgetのリンクです。
    http://api.jqueryui.com/tabs/

サンプル

Tabs Widgetのサンプルです。

タブ1の内容
タブ2の内容
タブ3の内容

コード

上記サンプルのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのtabsのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
#test1 { width: 400px; }
</style>
<script>
$(function() {
	$("#test1").tabs();
});
</script>
</head>
<body >
<div id="test1">
	<ul>
		<li><a href="#tab1">タブその1</a></li>
		<li><a href="#tab2">タブその2</a></li>
		<li><a href="#tab3">タブその3</a></li>
	</ul>
	<div id="tab1">
		タブ1の内容
	</div>
	<div id="tab2">
		タブ2の内容
	</div>
	<div id="tab3">
		タブ3の内容
	</div>
</div>
</body>
</html>

初期表示のタブを設定する

初期表示のタブを設定する場合、上記サンプルコードの14行目を以下のようにします。
最初のタブは0になります。1を指定しているので、タブその2が初期表示状態になります。

	$("#test2").tabs(
		{ active: 1 } //タブその2を指定
	);

サンプルです。

タブ1の内容
タブ2の内容
タブ3の内容

関連の記事

jQuery UI アコーディオンのサンプル(accordion)
jQuery UI カレンダーから日付を入力するサンプル(datepicker)
jQuery UI モーダルでダイアログを開くサンプル(dialog)
jQuery UI ツールチップのサンプル(tooltip)
jQuery UI 要素の並び順を変えるサンプル(sortable)
jQuery UI オートコンプリートのサンプル(Autocomplete)
jQuery UI 要素をドラッグ・アンド・ドロップするサンプル(draggableとdroppable)



△上に戻る