手册 - Materialize

介绍

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

可变宽度的标签默认

测试 1
测试 2
测试 3
测试 4

测试 1

测试 2

测试 3

测试 4

固定宽度标签增加`.tabs-fixed-width`类

测试 1
测试 2
禁用标签
测试 4
测试 5

测试 1

测试 2

测试 3

测试 4

测试 5

可滚动标签标签自动变得可以滚动

测试 1
测试 2
测试 4
测试 1
测试 2
禁用标签
测试 4
测试 1
测试 2
禁用标签
测试 4

测试 5

测试 6

测试 7

测试 8

测试 9

测试 10

测试 11

测试 12

测试 13

测试 14

测试 15

标签 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 插件选项

选项名称	描述
onShow	执行一个回调函数当标签改变时。这个回调函数提供一个参数关联当前显示的标签。

预选中标签

默认第一个标签是选中的，但是如果这不是你想要的，你可以预选中一个标签通过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>

介绍