选项卡结构由一个无序列表组成，其中包含与选项卡 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）来预选选项卡。或者，您可以将 active 类添加到 a 标记中。

  <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>