jQuery UI タブを使用したコード例と使い方の解説

基本的なタブの作成: 最初に、jQuery UI ライブラリを読み込み、HTML ファイル内にタブのコンテンツを配置します。次に、以下のようなコードを追加します。

<div id="tabs">
  <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">
    <p>タブ1のコンテンツ</p>
  </div>
  <div id="tab2">
    <p>タブ2のコンテンツ</p>
  </div>
  <div id="tab3">
    <p>タブ3のコンテンツ</p>
  </div>
</div>

$(function() {
  $("#tabs").tabs();
});

これによって、3つのタブが作成され、各タブのコンテンツが表示されます。

タブのオプション設定: タブにはさまざまなオプションがあります。例えば、アクティブなタブの設定や、タブの切り替え時のアニメーションの設定などがあります。以下はいくつかのオプションの使用例です。

$(function() {
  $("#tabs").tabs({
    active: 1, // 最初に表示するタブのインデックス (0から始まる)
    collapsible: true, // 全てのタブを閉じることができるようにする
    heightStyle: "content" // タブの高さをコンテンツに合わせる
  });
});

イベントの利用: タブの切り替えやタブ内の要素をクリックした時に特定の処理を実行したい場合、イベントを利用することができます。以下は、タブの切り替え時にコンソールにメッセージを出力する例です。

$(function() {
  $("#tabs").tabs({
    activate: function(event, ui) {
      console.log("タブが切り替わりました。");
    }
  });
});

以上が、jQuery UI タブの基本的な使用方法といくつかのコード例です。これを参考にして、ウェブページでタブを実装してみてください。