Material Design Lite:在Drawer UI元素中使用导航链接

时间:2016-03-02 00:29:08

标签: material-design-lite

我在“测试模板”示例(来自getmdl.io)中添加了一个简单的MDL抽屉元素,并设置了href ='#overview'以链接到'overview'内容页面。单击抽屉元素中的相关链接时,没有任何反应!我希望内容部分呈现“概述”页面类似于单击标题部分中的选项卡。显然,我必须做错事。这是一个片段,显示了“概述”页面的抽屉元素和开始div元素。

...</header>
      <div class="mdl-layout__drawer">
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="#overview">Overview</a>
          <a class="mdl-navigation__link" href="#features">Features</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
        <div class="mdl-layout__tab-panel is-active" id="overview">...

任何帮助将不胜感激!感谢。

1 个答案:

答案 0 :(得分:0)

请问getmdl.io中的哪个模板?

我做到了:

<body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">      
                <span class="mdl-layout-title">Material Design Grid</span>          
            </div>       
        </header>
    <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Material Design Tutorial</span>
           <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="#home">Home</a>
               <a class="mdl-navigation__link" href="#about">About</a>  
           </nav>
    </div>
    <main class="mdl-layout__content">
        ...
    </main>
</body>

并且它在网址上展示#href,页面仍然保持不变。 用这个交叉检查你的结构,如果可能的话,给我一些我在最后检查的代码?