[jQuery UI] タブを実装する（Tabs）

投稿日：2018年8月11日

jQueryUIでタブを実装するサンプルです。

サンプルソース

例）２タブ目を初期表示したタブ画面を作成する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryUIタブサンプル</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function(){
  //表示設定
  $("#d1").tabs({
     active:1          //2タブ目を初期表示
    ,collapsible:true  //折り畳み可能とする
  });
});
</script>
</head>
<body>
  <div id="d1">
    <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">
      １ページ目です
    </div>
    <div id="tab2">
      ２ページ目です
    </div>
    <div id="tab3">
      ３ページ目です
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryUIタブサンプル</title>

$(function(){

//表示設定

$("#d1").tabs({

active:1 //2タブ目を初期表示

,collapsible:true //折り畳み可能とする

});

</script>

</head>

<body>

<ul>

</ul>

１ページ目です

</div>

２ページ目です

</div>

３ページ目です

</div>

</body>

</html>

実行サンプル

タブを２回クリックすると折りたたまれます。

タブ1
タブ2
タブ3

１ページ目です

２ページ目です

３ページ目です

オプション

Tabsのオプションには以下のようなものがあります。

【オプション】
オプション	意味
active	初期選択のタブを指定する　例）２番目のタブを初期選択とする ⇒ active:1
collapsible	折り畳み可能とするかどうか　true：する　false：しない（デフォルト） ※trueの場合はタブをダブルクリックすると折りたたまれます。

解説

オプションは上記以外にもあります。
jQueryUI（Tabs）公式ページ ⇒ https://jqueryui.com/tabs/

執筆者：とら