头部 - 选项卡/Tabs

在布局的头部可以嵌入选项栏/tab-bar，内容区域可以嵌入选项面板/tab-panel。当用户点击 选项栏中的链接/tab*时，自动显示对应的选项面板：

在布局头部声明选项栏，需要遵循特定的HTML结构：

<header class="mdl-layout__header">
    <!--声明选项栏-->
    <div class="mdl-layout__tab-bar">
        <!--声明选项，通过href绑定对应的面板，对要激活的选项声明is-active-->
        <a href="#panel-1" class="mdl-layout__tab is-active">tab-1</a>
        <a href="#panel-2" class="mdl-layout__tab">tab-2</a>
        <a href="#panel-3" class="mdl-layout__tab">tab-3</a>
    </div>
</header>

在布局的内容区域声明选项面板，也依赖于特定的HTML结构：

<main class="mdl-layout__content">
    <!--声明选项面板，使用id属性指定锚点，对要初始显示的面板声明is-active-->
    <div class="mdl-layout__tab-panel is-active" id="panel-1">...</div>
    <div class="mdl-layout__tab-panel" id="panel-2">...</div>
    <div class="mdl-layout__tab-panel" id="panel-3">...</div>
</main>