Javascript 材料设计Lite导航内页

我正在使用Material Design Lite制作一个单页应用程序。我有一个带有两个按钮的页面，每个按钮都应该“导航”到另一个div，就像我们在jquerymobile中导航页面时所做的那样，当我在一个html文件中以页面的形式编写多个div时

MDL网站中没有示例，但源代码显示了如何使用带有类MDL-components_u页面的节，如下所示：

<section id="first-section" class="mdl-components__page">
  Part 1
</section>

<section id="second-section" class="mdl-components__page>
  Part 2
</section>

function viewPage(page) {
  if( page == "home") {
    document.getElementById('home').style.display = "initial";
    document.getElementById('settings').style.display = "none";
  } else {
    document.getElementById('home').style.display = "none";
    document.getElementById('settings').style.display = "inline";
  }
}

第一部分
MDL网站有自定义组件使其正常运行。您试图从我们的标记中获取一些东西，并假设它“正常工作”。您需要查看自定义JS，并为您自己的站点提取组件以使其正常工作，再加上CSS中的额外样式

相反，如果您想要这样的东西，请编写您自己的组件。这样，它将完全满足您的需要和需要。
在您不想显示的部分使用css属性
display:none
。例如，在我的代码中：

<nav class="mdl-navigation">
    <a class="mdl-navigation__link" onclick="viewPage('home');" href="#home">Home</a>
    <a class="mdl-navigation__link" onclick="viewPage('settings');" href="#settings">Settings</a>
</nav>
<!-- ... -->
<section id="home">
    <div class="page-content">
<!-- ... -->
<section id="settings" style="display:none">
    <div class="page-content">
    <!-- ... -->

你试过“为了”吗？我已经试过jsut了。但不幸的是什么也没发生。我认为这还不清楚：问题不在于单击并转到新页面，问题在于所有部分都显示了一次。@hurricane，我编辑了答案，以便更详细地了解问题。谢谢，对我来说，这看起来是一个未记录但存在的组件
<nav class="mdl-navigation">
    <a class="mdl-navigation__link" onclick="viewPage('home');" href="#home">Home</a>
    <a class="mdl-navigation__link" onclick="viewPage('settings');" href="#settings">Settings</a>
</nav>
<!-- ... -->
<section id="home">
    <div class="page-content">
<!-- ... -->
<section id="settings" style="display:none">
    <div class="page-content">
    <!-- ... -->

function viewPage(page) {
  if( page == "home") {
    document.getElementById('home').style.display = "initial";
    document.getElementById('settings').style.display = "none";
  } else {
    document.getElementById('home').style.display = "none";
    document.getElementById('settings').style.display = "inline";
  }
}