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

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

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

タブ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/3.4.1/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

タブ1の内容

タブ2の内容

タブ3の内容

タブの見た目を変える

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

タブその1
タブその2
タブその3

タブ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/3.4.1/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行目は、フォントサイズと背景色を指定しています。