0
Я пытаюсь изучить Material Design Lite с использованием формата одной страницы. Я хотел бы иметь возможность ссылаться на разные вкладки контента, не используя всегда меню. Я подготовил образец, который должен показать, что я пытаюсь сделать. Я надеюсь, что кто-то может помочь мне найти успех.Ссылки на содержание MDL, SPA на разные вкладки содержимого не работают
Мой код следует
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<br />
<div class="page-content"> Tab Panel 1</div>
<p id="top">
<br />
<a href="#scroll-tab-2">Jump to Tab Panel 2 - Not working</a>
<br /> <br />
<a href="#bottom">Jump to bottom</a>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<p id="bottom">
tab panel bottom<br /> <br />
<a href="#top">Jump to Top</a>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<br />
<div class="page-content">Tab Panel 2</div><br /><br />
<a href="#scroll-tab-1">Jump to Tab 1 - Not working</a>
</section>
</main>
</div>
</body>
</html>