「jQuery」jQuery UI タブ(Tabs)を使用するサンプル

2013年7月11日2022年2月22日

環境

jquery.min.js 3.6.0
jquery-ui.min.js 1.12.1
jquery-ui.css 1.12.1

説明
jQuery UIのTabs Widgetのリンク先
https://api.jqueryui.com/tabs/

書式
$(“セレクタ名").tabs(処理コード);
タブをクリックすることで内容を切り替えります。

使用例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/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>#cft{width:250px;}</style>
<div id="cft">
      <ul>
            <li><a href="#tabtokyo">東京</a></li>
            <li><a href="#taboosaka">大阪</a></li>
            <li><a href="#tabfukuoka">福岡</a></li>
      </ul>
      <div id="tabtokyo">
            東京の内容
      </div>
      <div id="taboosaka">
            大阪の内容
      </div>
      <div id="tabfukuoka">
            福岡の内容
      </div>
</div>
<script>
 $(function() {
       $("#cft").tabs(
     //初期表示のタブ3を設定する
      { active: 2 });
 });
</script>

結果
初期表示のタブは「福岡」タブです。
「東京」タブを押すと「東京」タブ配下の内容が表示されます。