Material Design Lite：在抽屉 UI 元素中使用导航链接答案

【问题标题】：Material Design Lite: Using Navigation Links in the Drawer UI ElementMaterial Design Lite：在抽屉 UI 元素中使用导航链接
【发布时间】：2023-09-23 13:08:01
【问题描述】：

我在“测试模板”示例（来自 getmdl.io）中添加了一个简单的 MDL 抽屉元素，并设置了 href='#overview' 以链接到“概览”内容页面。单击抽屉元素中的相关链接时，没有任何反应！我期待内容部分呈现类似于单击标题部分中的选项卡的“概述”页面。显然，我一定做错了什么。这是一个显示“概览”页面的抽屉元素和打开 div 元素的 sn-p。

...</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">...

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

【问题讨论】：

标签： material-design-lite

【解决方案1】：

请问这是 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>

它在 url 上显示 #href 并且页面保持静止。用它来交叉检查你的结构，如果可能的话，再给我一些我检查的代码？

【讨论】：

感谢您的回复。我一直在使用“纯文本”模板 (getmdl.io/templates/text-only/index.html) 并添加了抽屉元素以进行测试。当我点击链接（来自抽屉元素）时，页面保持静止。