material design lite学习（五）选项卡

本文介绍MDL页面的选项卡布局。这部分内容比较简单，直接看示例代码。

<main class="mdl-layout__content">
            <div class="mdl-tabs mdl-js-tabs">
                <div class="mdl-tabs__tab-bar">
                    <a href="#tab-panel1" class="mdl-tabs__tab is-active">选项卡1</a>
                    <a href="#tab-panel2" class="mdl-tabs__tab">选项卡2</a>
                    <a href="#tab-panel3" class="mdl-tabs__tab">选项卡3</a>
                </div>
                <div class="mdl-tabs__panel is-active" id="tab-panel1">选项卡1的内容</div>
                <div class="mdl-tabs__panel" id="tab-panel2">选项卡2的内容</div>
                <div class="mdl-tabs__panel" id="tab-panel3">选项卡3的内容</div>
            </div>
        </main>

代码第2行，声明当前的div元素是一个mdl-tabs类型。另外这个div元素也添加了mdl-js-tabs类，增加一些基本的js响应。

代码第3-10行定义了选项卡的布局结构。总体来说，可以分为两个部分。1. 选项卡的标题栏（tabs bar），用于列出选项卡的选项列表。用户可以通过点击列表中的元素进行选项卡面板切换。2. 选项卡的面板。

下面对以上两个内容分别进行说明。

1. 标题栏

代码第3行声明当前元素是选项卡的标题栏（mdl-tabs__tab-bar）

代码第4-6行，为标题栏添加了3个选项。每个选项都是一个mdl-tabs__tab类。每个选项都需要对应一个选项卡面板。第4-6行三个a元素的href属性分别指定了各个选项对应的选项卡面板的id。

2. 选项卡面板

在代码第3-7行定义的选项卡标题栏中定义了三个选项。所以在第8-10行也相应的定义了三个选项卡面板。每个选项卡面板都需要赋予一个id与相应选项卡选项的href属性一致。

代码的执行效果如下。