タブの構造は、タブIDに対応するハッシュを持つタブの順序なしリストで構成されています。各タブをクリックすると、対応するタブIDを持つコンテナのみが表示されます。クラス.disabledを追加すると、タブにアクセスできなくなります。

• テスト 1
• 別のタブ
• テスト 3
• テスト 4

  <div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
  </div>
        

初期化

  var instance = M.Tabs.init(el, options);

  // Or with jQuery

  $(document).ready(function(){
    $('.tabs').tabs();
  });
        

オプション

メソッド

jQueryは依存関係ではなくなったため、すべてのメソッドはプラグインインスタンスで呼び出されます。プラグインインスタンスは次のように取得できます。

  var instance = M.Tabs.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.tabs').tabs('methodName');
    $('.tabs').tabs('methodName', paramName);
  */
          

.select();

IDを持つタブに対応するタブコンテンツを表示します

引数

文字列: 切り替えたいタブのID

instance.select('tab_id');
        

.updateTabIndicator();

タブインジケーターの位置を再計算します。これはインジケーターの位置が正しくない場合に役立ちます。

instance.updateTabIndicator();
        

.destroy();

プラグインインスタンスを破棄して削除します

instance.destroy();
        

プロパティ

タブの事前選択

デフォルトでは、最初のタブが選択されています。ただし、これが希望どおりでない場合は、URLにハッシュを渡すことでタブを事前選択できます（例：#test2）。または、aタグにクラスactiveを追加することもできます。

  <li class="tab"><a class="active" href="#test3">Test 3</a></li>
        

外部ページへのリンク

デフォルトでは、Materializeタブはデフォルトのアンカー動作を無視します。タブを通常のハイパーリンクとして強制的に動作させるには、そのリンクのtargetプロパティを指定するだけです！target値のリストは、こちらにあります。

  <li class="tab col s2">
    <a target="_blank" href="https://github.com/Dogfalo/materialize">External link in new window</a>
  </li>
  <li class="tab col s2">
    <a target="_self" href="https://github.com/Dogfalo/materialize">External link in same window</a>
  </li>
        

スワイプ可能なタブ

swipeableオプションをtrueに設定すると、タッチ対応デバイスでスワイプしてタブを切り替えることができるタブを有効にできます。タブコンテンツdivを同じラップコンテナに保持してください。responsiveThresholdオプションを、スワイプ機能がアクティブになる画面幅（ピクセル単位）に設定することもできます。

注：これもタッチ互換です！指でスワイプしてカルーセルをスクロールしてみてください。

• テスト 1
• テスト 2
• テスト 3

  <ul id="tabs-swipe-demo" class="tabs">
    <li class="tab col s3"><a href="#test-swipe-1">Test 1</a></li>
    <li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
    <li class="tab col s3"><a href="#test-swipe-3">Test 3</a></li>
  </ul>
  <div id="test-swipe-1" class="col s12 blue">Test 1</div>
  <div id="test-swipe-2" class="col s12 red">Test 2</div>
  <div id="test-swipe-3" class="col s12 green">Test 3</div>
        

固定幅タブ

.tabs-fixed-widthクラスをタブコンテナに追加します

• テスト 1
• テスト 2
• 無効なタブ
• テスト 4
• テスト 5

  <ul class="tabs tabs-fixed-width tab-demo z-depth-1">
    <li class="tab"><a href="#test1">Test 1</a></li>
    <li class="tab"><a class="active" href="#test2">Test 2</a></li>
    <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
    <li class="tab"><a href="#test4">Test 4</a></li>
    <li class="tab"><a href="#test0">Test 5</a></li>
  </ul>
  <div id="test1" class="col s12"><p>Test 1</p></div>
  <div id="test2" class="col s12"><p>Test 2</p></div>
  <div id="test3" class="col s12"><p>Test 3</p></div>
  <div id="test4" class="col s12"><p>Test 4</p></div>
  <div id="test0" class="col s12"><p>Test 5</p></div>