选项卡/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样式，使点击时具有水纹动效。