Question

我使用Material Design Lite制作单页应用。我有一个带有两个按钮的页面，每个按钮应该＆＃34;导航＆＃34;到另一个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的额外样式。

相反，如果您想要这样的东西，请编写您自己的组件。这样，它将完全满足您的需求和您的需求。

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导航页面内部

2 个答案: