选项卡/Tabs
MDL的选项卡/Tabs组件用来在多个内容间进行切换：
选项卡/Tabs组件具有固定的HTML结构，由选项栏、选项面板等元素构成：
<!--1. 声明组件-->
<div class="mdl-tabs mdl-js-tabs">
<!--2. 声明选项栏-->
<div class="mdl-tabs__tab-bar">
<!--2.1 声明选项，使用href属性指向选项面板，为要激活的选项应用is-active样式-->
<a class="mdl-tabs__tab is-active" href="#panel-1">tab-1</a>
<a class="mdl-tabs__tab" href="#panel-2">tab-2</a>
</div>
<!--3. 声明选项面板，使用id属性声明锚点 , 为要显示的面板应用is-active样式-->
<div class="mdl-tabs__panel is-active" id="panel-1">...</div>
<div class="mdl-tabs__panel" id="panel-2">...</div>
</div>
可以为组件元素应用mdl-js-ripple-effect样式，使点击时具有水纹动效。
配置选项
| MDL class | 功能 |
|---|---|
| mdl-tabs | 将元素声明为tabs组件 |
| mdl-js-tabs | 实现tabs组件的基本逻辑 |
| mdl-tabs__tab-bar | 将元素声明为tabs组件的导航条容器 |
| mdl-tabs__tab | 将链接元素声明为tabs组件的tab页触发器 |
| mdl-tabs__panel | 将元素声明为tabs组件的tab页内容面板 |
| is-active | 将tab页内容面板或tab页触发器设置为活动状态 |
| mdl-js-ripple-effect | 为tab页触发器增加点击时水纹效果。可选 |
为示例代码的选项卡增加一个选项及相应的选项面板，并将其设置为活动状态。