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

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

確認環境
・jquery 1.12.4
・jqueryui 1.12.1

目次

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の内容

コード

上記サンプルのコードです。
21-23行目は、タブに表示される文字です。タブを押した時に表示する内容は、a hrefと#で指定した先にあります。
25-33行目は、タブの内容です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのtabsのサンプル</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<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>
<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の内容

 

タブの見た目を変える

タブの見た目は、jQueryUIのCSSであるjquery-ui.cssに指定されています。
jquery-ui.cssのタブのクラスセレクタを指定して見た目を変えます。

コード

1行目のjquery-ui.cssはjQueryUIのCSSです。
7行目の.ui-tabs .ui-tabs-nav liは、jquery-ui.cssにあるCSSのクラスセレクタです。
クラスセレクタの間に空白があります。子孫セレクタです。
階層構造でセレクタを指定するサンプル(子孫/子/隣接/一般兄弟セレクタ)
8,9行目は、フォントサイズと背景色を指定しています。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<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>
<style>
#test3 { width: 400px; }

.ui-tabs .ui-tabs-nav li{
	font-size:14px;
	background:yellow;
}
</style>
<script>
$(function() {
	$("#test3").tabs();
});
</script>
<body >

<div id="test3">
	<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>

サンプル

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

タブ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)



△上に戻る