给出以下示例代码（包括https://getmdl.io/组件）：
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Testpage</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Menu</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#scroll-tab-1">Test1</a>
<a class="mdl-navigation__link" href="#scroll-tab-2">Test2</a>
</nav>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content">
<!-- Your content goes here -->
Test1
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
<!-- Your content goes here -->
Test2
</div>
</section>
</main>
</div>
</body>如何使用导航抽屉元素在“scroll-tab-1”和“scroll-tab-2”部分之间切换？
它只适用于标签栏元素：
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Testpage</span>
</div>
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Test1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">Test2</a>
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content">
<!-- Your content goes here -->
Test1
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
<!-- Your content goes here -->
Test2
</div>
</section>
</main>
</div>
</body>令人惊讶的是，我发现任何类似的东西，我发现只有href=""导航元素的所有教程。也许我对如何使用导航抽屉的理解是错误的？
提前致谢
我有同样的问题，我找不到一个简单的解决方案（如果他们为垂直标签栏添加了MD规范，那就太好了）。我最终做的是创建一个显示被点击元素并隐藏其他元素的函数。该函数有一个参数：要显示的元素的id。我在document.onload事件中调用此函数，向其传递默认情况下应该可见的元素的id，并在mdl-navigation__link元素的每个onclick事件中调用它，并将要传递的内容元素的id传递给它。
<script>
document.onload = show("dashboard");
function show(targetId) {
var elements = document.getElementById("content").querySelectorAll(".mdl-card");
for (var i=0 ; i < elements.length; i++) {
if (elements[i].id === targetId) {
elements[i].style.display = 'block';
} else {
elements[i].style.display = 'none';
}
}
}
</script><div class="mdl-layout__drawer">
<span class="mdl-layout-title">CSRS</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#order" onclick="show('order')">Order Manager</a>
<a class="mdl-navigation__link" href="#inventory" onclick="show('inventory')">Inventory Manager</a>
<a class="mdl-navigation__link" href="#dahsboard" onclick="show('dashboard')">Dashboard</a>
<a class="mdl-navigation__link" href="#reports" onclick="show('reports')">Reports</a>
</nav>
</div>