| Sr.No. | 类名和描述 |
| 1 |
mdl-layout
将容器标识为 MDL 组件。外部容器元素需要。
|
| 2 |
mdl-tabs
将标签容器标识为 MDL 组件。 "外部" div 元素需要。
|
| 3 |
mdl-js-tabs
将基本 MDL 行为设置为选项卡容器。 "外部" div 元素需要。
|
| 4 |
mdl-js-ripple-effect
向标签链接添加波纹点击效果。可选的;继续"外部" div 元素。
|
| 5 |
mdl-tabs__tab-bar
将容器标识为 MDL 选项卡链接栏。第一个"内部"div 元素需要。
|
| 6 |
mdl-tabs__tab
将锚点（链接）标识为 MDL 选项卡激活器。第一个"内部"div 元素中的所有链接都需要。
|
| 7 |
is-active
将选项卡标识为默认显示选项卡。一个（并且只有一个）"内部"div（选项卡）元素是必需的。
|
| 8 |
mdl-tabs__panel
将容器标识为标签内容。每个"内部"div（选项卡）元素都需要。
|
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<div class = "mdl-tabs mdl-js-tabs">
<div class = "mdl-tabs__tab-bar">
<a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
<a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
<a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
</div>
<div class = "mdl-tabs__panel is-active" id = "tab1-panel">
<p>Tab 1 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab2-panel">
<p>Tab 2 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab3-panel">
<p>Tab 3 Content</p>
</div>
</div>
</main>
</div>
</body>
</html>
