javascript - Material Design Lite 导航内页

Question

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

MDL 网站上没有示例，但源代码显示使用类 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 网站具有自定义组件以使其正常运行。您正试图从我们的标记中获取一些东西并假设它会“正常工作”。您需要研究自定义 JS 并为您自己的网站提取组件以使其正常工作，再加上 CSS 的额外样式。

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