Material Design Lite 页面内导航

Question

我正在使用 Material Design Lite 制作单页应用程序。我有一个有两个按钮的页面，每个按钮应该 "navigate" 到另一个 div，就像我们在 Jquery 移动页面中导航时所做的那样，当我写很多 div 时作为一个 html 文件中的页面。

MDL 网站上没有示例，但是源代码显示使用带有 class mdl-components__page 的部分，如下所示：

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

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

并且链接应指向

<a href="#first-section" class="mdl-components__link mdl-component tooltips">
  Link 1
</a>

<a href="#second-section" class="mdl-components__link mdl-component tooltips">
  Link 2
</a>

但是当我使用它时，所有部分都会同时显示。知道我做错了什么吗？有人知道如何解决吗？

已编辑：

这是我写的代码图：

<main class="docs-layout-content mdl-layout__content">
<!-- First Page (default)-->
            <section id="index-section" class="mdl-components-index mdl-components__page">

                <div class="painel-tracejado mission centralizado bloco-margem">
                    {{idioma.sejaBemVindo}}
                </div>

                <div class="painel-tracejado">
                    {{idioma.mensagemBemVindo}}
                </div>

                <div class="bloco-margem">
                    <br/>
                    <button href="#criarConta"
                            for="criarConta"
                            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored largo">
                            {{idioma.criarConta}}
                    </button>
                    <br/>
                    <button
                            href="#login"
                            for="login"
                            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored largo">
                        {{idioma.jaSouCadastrado}}
                    </button>
                </div>
            </section>
<!--Second page -->
            <section id="criarConta-section" class="mdl-components__page">
                <div class="bloco-margem painel-tracejado mission">
                    {{idioma.crieConta}}
                </div>

                <div class="bloco-margem painel-tracejado">

                    <input type="text" name="nome" ng-model="usuario.atual.visibleByAnonymousUsers.nome" placeholder="{{idioma.nome}}" required="">

                    <input type="text" name="sobreNome" ng-model="usuario.atual.visibleByFriends.sobreNome" placeholder="{{idioma.sobreNome}}" required="">

                    <input type="text" name="cidade" ng-model="usuario.atual.visibleByRegisteredUsers.cidade" placeholder="{{idioma.cidade}}" required="">

                    <input type="text" name="estado" ng-model="usuario.atual.visibleByRegisteredUsers.estado" placeholder="{{idioma.estado}}" required="">

                    <input type="text" name="pais" ng-model="usuario.atual.visibleByRegisteredUsers.pais" placeholder="{{idioma.pais}}" required="">

                    <input type="email" ng-model="usuario.atual.visiblebyTheUser.email" name="email" placeholder="{{idioma.email}}*" required="">

                    <input type="password" name="senha" ng-model="usuario.atual.password" placeholder="{{idioma.senha}}*" required="">

                    <input type="password" name="senha2" ng-model="usuario.atual.password2" placeholder="{{idioma.confirmeSenha}}*" required="">
                </div>

                <div class="bloco-margem">
                    <a class="ui-btn" ng-click="usuario.cadastrar()">{{idioma.criarContaEEntrar}}</a>
                </div>
            </section>
<!-- Third Page -->
            <section id="login-section" class="mdl-components__page">
                <div class="bloco-margem painel-tracejado mission">
                    {{idioma.informeSeusDadosDeAcesso}}
                </div>

                <form method="post" action="">
                    <div class="bloco-margem painel-tracejado">
                        <label for="email">{{idioma.email}}</label>
                        <input type="email" ng-model="usuario.atual.username" id="email" name="email" required="">
                        <label for="senha">{{idioma.senha}}</label>
                        <input type="password" ng-model="usuario.atual.password" name="senha" id="senha">
                    </div>

                    <div class="bloco-margem">
                        <a class="ui-btn" ng-click="usuario.login()">{{idioma.entrar}}</a>
                        <a class="ui-btn" ng-click="usuario.recuperarSenha()">{{idioma.esqueceuSuaSenha}}</a>
                    </div>
                </form>
            </section>

        </main>

在图像中您可能会看到问题：页面（部分）一次显示。

Answer 1

MDL 网站具有使其正常运行的自定义组件。您正试图从我们的标记中获取某些内容并假设它会 "just work"。您需要查看自定义 JS 并为您自己的站点提取组件以使其正常工作，以及来自 CSS.

的额外样式

相反，如果您想要这样的东西，请编写您自己的组件。这样它就会完全按照您的需要和您想要的方式进行。

Answer 2

在您不想显示的部分使用 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">
    <!-- ... -->

我的 JS 函数 viewPage 如下所示：

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";
  }
}

Material Design Lite 页面内导航

Material Design Lite navigation inside page

javascript

html

material-design-lite