MDL：如何使用导航抽屉切换部分？答案

【问题标题】：MDL: How to switch sections with navigation drawer?MDL：如何使用导航抽屉切换部分？
【发布时间】：2019-02-26 16:09:26
【问题描述】：

给定以下示例代码（包括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="" 导航元素。也许我对如何使用导航抽屉的理解有误？

提前致谢

【问题讨论】：

请在问题中添加相关代码。如果jsfiddle停止会发生什么，这个问题没有意义

标签： html material-design-lite

【解决方案1】：

我遇到了同样的问题，但找不到简单的解决方案（如果他们为垂直标签栏添加 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>

【讨论】：