标签

标签结构由标签有一个无序列表的哈希值对应的标签 ID。然后，当您单击每个选项卡时，只有与相应的选项卡的容器将成为可见。你可以添加 .disabled 类使标签无法访问。

可变宽度的标签 默认

固定宽度标签

增加 .tabs-fixed-width 类

可滚动标签

标签自动变得可以滚动

标签 HTML 结构

<div class="row">
    <div class="col s12">
<ul class="tabs">
  <li class="tab col s3"><a href="#test1">测试 1</a></li>
  <li class="tab col s3"><a class="active" href="#test2">测试 2</a></li>
  <li class="tab col s3 disabled"><a href="#test3">禁用标签</a></li>
  <li class="tab col s3"><a href="#test4">测试 4</a></li>
</ul>
    </div>
    <div id="test1" class="col s12">测试 1</div>
    <div id="test2" class="col s12">测试 2</div>
    <div id="test3" class="col s12">测试 3</div>
    <div id="test4" class="col s12">测试 4</div>
  </div>

jQuery 插件初始化

标签是自动初始化的,但是如果你动态的增加标签，你将必须初始化他们像这样。

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

jQuery 插件方法

你可以通过程序触发一个标签改变通过 select_tab 方法。你必须输入你想变换的标签的 id。在我们演示的情况下，我们使用 test1，test2，test3。

$(document).ready(function(){
  $('ul.tabs').tabs('select_tab', 'tab_id');
});

jQuery 插件选项

预选中标签

默认第一个标签是选中的，但是如果这不是你想要的，你可以预选中一个标签通过 hash 在 url ex:#test2 或者你可以增加一个类 active 到这个 a 标签。

<li class="tab col s2"><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">新窗口打开</a>
  </li>
  <li class="tab col s2">
    <a target="_self" href="https://github.com/Dogfalo/materialize">同窗口打开</a>
  </li>