Question

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

预先感谢

Answer 1

我遇到了同样的问题，但找不到一个简单的解决方案（如果他们为垂直制表符栏添加了MD规格，那就太好了）。我最终要做的是创建一个显示所单击元素并隐藏其他元素的函数。该函数有一个参数：要显示的元素的ID。我在document.onload事件中调用此函数，将默认情况下应显示的元素的ID传递给该函数，并在mdl-navigation__link元素的每个onclick事件中将其调用，并传递要显示的content元素的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>

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

1 个答案: