Material Design Lite: использование навигационных ссылок в элементе интерфейса Drawer

Я добавил простой элемент выдвижного ящика MDL в пример "Тестового шаблона" (из getmdl.io) и установил href='# 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 ответ

Какой шаблон это в 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 на URL и страница остается на месте. перепроверить вашу структуру с этим и, если возможно, дать еще какой-нибудь код, который я проверю на своем конце?

Источник
Другие вопросы по тегам