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/

タブのサンプル

タブのサンプルです。
タブを押すとタブ配下の内容が表示されます。

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

コード

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

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

<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>

<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>

<script>
$(function() {
	$("#test1").tabs();
});
</script>

6-8行目は、タブに表示される文字です。タブを押した時に表示する内容は、a hrefと#で指定した先にあります。
10-18行目は、タブの内容です。

 

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

初期表示のタブを設定する場合、2行目のようにactiveオプションを追加します。
最初のタブは0になります。1を指定しているので、タブその2が初期表示で選択されます。

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

サンプル

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

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

 

タブの見た目を変える

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

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

コード

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

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

.ui-tabs .ui-tabs-nav li{
	font-size:14px;
	background:yellow;
}
</style>

<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>
<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>
<script>
$(function() {
	$("#test3").tabs();
});
</script>

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

関連の記事

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

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る