标签



介绍

tabs由一系列无序列表组成,当点击每一个tab的时候,相对应的容器就会显示出来。使用.disabled来禁用相应的tab。

Test 1

Test 2

Test 3

Test 4


Tabs HTML结构


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

初始化

Tabs会自动的初始化,但是如果动态添加的则需要手工调用下。


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

方法

你可以在程序中指定选定哪个tab,使用select_tab方法。


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

预选取

默认情况下第一个Tab将会被选取,但是如果你不想这样,看下面的例子。


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