menu

介绍

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


可变宽度的标签默认

测试 1

测试 2

测试 3

测试 4


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

测试 1

测试 2

测试 3

测试 4

测试 5


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

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